feat: Condense color extraction logic and improve fallback (#7347)
* refactor: move getColor to src * refactor useColor to use getColor function * remove consts * refactor files * clean up color convert fn * move getColor test and import test images * hardcode array buffers for images * add invalid png
This commit is contained in:
Charles Bachmeier
GitHub
parent
b667662b49
commit
beef7f2d86
@ -3,9 +3,9 @@ import { ImageResponse } from '@vercel/og'
|
||||
import React from 'react'
|
||||
|
||||
import { blocklistedCollections } from '../../../../../src/nft/utils/blocklist'
|
||||
import { getColor } from '../../../../../src/utils/getColor'
|
||||
import { CHECK_URL, WATERMARK_URL } from '../../../../constants'
|
||||
import getCollection from '../../../../utils/getCollection'
|
||||
import getColor from '../../../../utils/getColor'
|
||||
import getFont from '../../../../utils/getFont'
|
||||
import { getRequest } from '../../../../utils/getRequest'
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
import { ImageResponse } from '@vercel/og'
|
||||
import React from 'react'
|
||||
|
||||
import { getColor } from '../../../../src/utils/getColor'
|
||||
import { WATERMARK_URL } from '../../../constants'
|
||||
import getColor from '../../../utils/getColor'
|
||||
import getFont from '../../../utils/getFont'
|
||||
import getNetworkLogoUrl from '../../../utils/getNetworkLogoURL'
|
||||
import { getRequest } from '../../../utils/getRequest'
|
||||
|
||||
@ -1,76 +1,2 @@
|
||||
export const WATERMARK_URL = 'https://app.uniswap.org/images/324x74_App_Watermark.png'
|
||||
export const CHECK_URL = 'https://app.uniswap.org/images/54x54_Verified_Check.svg'
|
||||
|
||||
export const DEFAULT_COLOR = [35, 43, 43]
|
||||
|
||||
export const predefinedTokenColors: { [key: string]: number[] } = {
|
||||
// old WBTC
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599/logo.png':
|
||||
[240, 146, 65],
|
||||
// new WBTC
|
||||
'https://assets.coingecko.com/coins/images/7598/large/wrapped_bitcoin_wbtc.png?1548822744': [240, 146, 65],
|
||||
// DAI
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png':
|
||||
[250, 176, 27],
|
||||
// UNI
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/logo.png':
|
||||
[230, 53, 140],
|
||||
// BUSD
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x4Fabb145d64652a948d72533023f6E7A623C7C53/logo.png':
|
||||
[239, 186, 9],
|
||||
// AI-X
|
||||
'https://s2.coinmarketcap.com/static/img/coins/64x64/26984.png': [41, 161, 241],
|
||||
// ETH
|
||||
'https://token-icons.s3.amazonaws.com/eth.png': [73, 112, 213],
|
||||
// HARRYPOTTERSHIBAINUBITCOIN
|
||||
'https://assets.coingecko.com/coins/images/30323/large/hpos10i_logo_casino_night-dexview.png?1684117567': [
|
||||
222, 49, 16,
|
||||
],
|
||||
// PEPE
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png':
|
||||
[62, 174, 20],
|
||||
// Unibot V2
|
||||
'https://s2.coinmarketcap.com/static/img/coins/64x64/25436.png': [74, 10, 79],
|
||||
// UNIBOT v1
|
||||
'https://assets.coingecko.com/coins/images/30462/small/logonoline_%281%29.png?1687510315': [74, 10, 79],
|
||||
// USDC
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png':
|
||||
[0, 102, 217],
|
||||
// HEX
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png':
|
||||
[249, 63, 140],
|
||||
// MONG
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x1ce270557C1f68Cfb577b856766310Bf8B47FD9C/logo.png':
|
||||
[169, 109, 255],
|
||||
// ARB
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xB50721BCf8d664c30412Cfbc6cf7a15145234ad1/logo.png':
|
||||
[41, 161, 241],
|
||||
// PSYOP
|
||||
'https://s2.coinmarketcap.com/static/img/coins/64x64/25422.png': [232, 143, 0],
|
||||
// MATIC
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png':
|
||||
[169, 109, 255],
|
||||
// TURBO
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA35923162C49cF95e6BF26623385eb431ad920D3/logo.png':
|
||||
[189, 110, 41],
|
||||
// AIDOGE
|
||||
'https://assets.coingecko.com/coins/images/29852/large/photo_2023-04-18_14-25-28.jpg?1681799160': [41, 161, 241],
|
||||
// SIMPSON
|
||||
'https://assets.coingecko.com/coins/images/30243/large/1111.png?1683692033': [232, 143, 0],
|
||||
// OX
|
||||
'https://assets.coingecko.com/coins/images/30604/large/Logo2.png?1685522119': [41, 89, 217],
|
||||
// ANGLE
|
||||
'https://assets.coingecko.com/coins/images/19060/large/ANGLE_Token-light.png?1666774221': [255, 85, 85],
|
||||
// APE
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x4d224452801ACEd8B2F0aebE155379bb5D594381/logo.png':
|
||||
[5, 74, 169],
|
||||
// GUSD
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x056Fd409E1d7A124BD7017459dFEa2F387b6d5Cd/logo.png':
|
||||
[0, 164, 189],
|
||||
// OGN
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x8207c1FfC5B6804F6024322CcF34F29c3541Ae26/logo.png':
|
||||
[5, 74, 169],
|
||||
// RPL
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xD33526068D116cE69F19A9ee46F0bd304F21A51f/logo.png':
|
||||
[255, 123, 79],
|
||||
}
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
import { DEFAULT_COLOR } from '../constants'
|
||||
import getColor from './getColor'
|
||||
|
||||
test('should return the average color of a black PNG image', async () => {
|
||||
const image = 'https://static.vecteezy.com/system/resources/previews/001/209/957/original/square-png.png'
|
||||
const color = await getColor(image)
|
||||
expect(color).toEqual([0, 0, 0])
|
||||
})
|
||||
|
||||
test('should return the average color of a blue PNG image', async () => {
|
||||
const image = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB2Ztcim-RKbOu57kfjYpXnnS1MO5YMUaUH9Lk5Eg&s'
|
||||
const color = await getColor(image)
|
||||
expect(color).toEqual([2, 6, 251])
|
||||
})
|
||||
|
||||
test('should return the average color of a white PNG image', async () => {
|
||||
const image = 'https://www.cac.cornell.edu/wiki/images/4/44/White_square.png'
|
||||
const color = await getColor(image)
|
||||
expect(color).toEqual([255, 255, 255])
|
||||
})
|
||||
|
||||
test('should return the average color of a white PNG image with whiteness dimmed', async () => {
|
||||
const image = 'https://www.cac.cornell.edu/wiki/images/4/44/White_square.png'
|
||||
const color = await getColor(image, true)
|
||||
expect(color).toEqual(DEFAULT_COLOR)
|
||||
})
|
||||
|
||||
test('should return the average color of a black JPG image', async () => {
|
||||
const image =
|
||||
'https://imageio.forbes.com/specials-images/imageserve/5ed6636cdd5d320006caf841/0x0.jpg?format=jpg&width=1200'
|
||||
const color = await getColor(image)
|
||||
expect(color).toEqual([0, 0, 0])
|
||||
})
|
||||
|
||||
test('should return default color for a gif image', async () => {
|
||||
const image = 'https://thumbs.gfycat.com/AgitatedLiveAgouti-size_restricted.gif'
|
||||
const color = await getColor(image)
|
||||
expect(color).toEqual(DEFAULT_COLOR)
|
||||
})
|
||||
73
src/constants/tokenColors.ts
Normal file
73
src/constants/tokenColors.ts
Normal file
@ -0,0 +1,73 @@
|
||||
export const DEFAULT_COLOR = [35, 43, 43]
|
||||
|
||||
export const predefinedTokenColors: { [key: string]: number[] } = {
|
||||
// old WBTC
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599/logo.png':
|
||||
[240, 146, 65],
|
||||
// new WBTC
|
||||
'https://assets.coingecko.com/coins/images/7598/large/wrapped_bitcoin_wbtc.png?1548822744': [240, 146, 65],
|
||||
// DAI
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png':
|
||||
[250, 176, 27],
|
||||
// UNI
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/logo.png':
|
||||
[230, 53, 140],
|
||||
// BUSD
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x4Fabb145d64652a948d72533023f6E7A623C7C53/logo.png':
|
||||
[239, 186, 9],
|
||||
// AI-X
|
||||
'https://s2.coinmarketcap.com/static/img/coins/64x64/26984.png': [41, 161, 241],
|
||||
// ETH
|
||||
'https://token-icons.s3.amazonaws.com/eth.png': [73, 112, 213],
|
||||
// HARRYPOTTERSHIBAINUBITCOIN
|
||||
'https://assets.coingecko.com/coins/images/30323/large/hpos10i_logo_casino_night-dexview.png?1684117567': [
|
||||
222, 49, 16,
|
||||
],
|
||||
// PEPE
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png':
|
||||
[62, 174, 20],
|
||||
// Unibot V2
|
||||
'https://s2.coinmarketcap.com/static/img/coins/64x64/25436.png': [74, 10, 79],
|
||||
// UNIBOT v1
|
||||
'https://assets.coingecko.com/coins/images/30462/small/logonoline_%281%29.png?1687510315': [74, 10, 79],
|
||||
// USDC
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png':
|
||||
[0, 102, 217],
|
||||
// HEX
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png':
|
||||
[249, 63, 140],
|
||||
// MONG
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x1ce270557C1f68Cfb577b856766310Bf8B47FD9C/logo.png':
|
||||
[169, 109, 255],
|
||||
// ARB
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xB50721BCf8d664c30412Cfbc6cf7a15145234ad1/logo.png':
|
||||
[41, 161, 241],
|
||||
// PSYOP
|
||||
'https://s2.coinmarketcap.com/static/img/coins/64x64/25422.png': [232, 143, 0],
|
||||
// MATIC
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png':
|
||||
[169, 109, 255],
|
||||
// TURBO
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA35923162C49cF95e6BF26623385eb431ad920D3/logo.png':
|
||||
[189, 110, 41],
|
||||
// AIDOGE
|
||||
'https://assets.coingecko.com/coins/images/29852/large/photo_2023-04-18_14-25-28.jpg?1681799160': [41, 161, 241],
|
||||
// SIMPSON
|
||||
'https://assets.coingecko.com/coins/images/30243/large/1111.png?1683692033': [232, 143, 0],
|
||||
// OX
|
||||
'https://assets.coingecko.com/coins/images/30604/large/Logo2.png?1685522119': [41, 89, 217],
|
||||
// ANGLE
|
||||
'https://assets.coingecko.com/coins/images/19060/large/ANGLE_Token-light.png?1666774221': [255, 85, 85],
|
||||
// APE
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x4d224452801ACEd8B2F0aebE155379bb5D594381/logo.png':
|
||||
[5, 74, 169],
|
||||
// GUSD
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x056Fd409E1d7A124BD7017459dFEa2F387b6d5Cd/logo.png':
|
||||
[0, 164, 189],
|
||||
// OGN
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x8207c1FfC5B6804F6024322CcF34F29c3541Ae26/logo.png':
|
||||
[5, 74, 169],
|
||||
// RPL
|
||||
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xD33526068D116cE69F19A9ee46F0bd304F21A51f/logo.png':
|
||||
[255, 123, 79],
|
||||
}
|
||||
@ -1,80 +1,67 @@
|
||||
import { ChainId, Token } from '@uniswap/sdk-core'
|
||||
import uriToHttp from 'lib/utils/uriToHttp'
|
||||
import Vibrant from 'node-vibrant/lib/bundle.js'
|
||||
import { shade } from 'polished'
|
||||
import { DEFAULT_COLOR } from 'constants/tokenColors'
|
||||
import useTokenLogoSource from 'hooks/useAssetLogoSource'
|
||||
import { rgb } from 'polished'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
|
||||
import { hex } from 'wcag-contrast'
|
||||
import { getColor } from 'utils/getColor'
|
||||
|
||||
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> {
|
||||
/**
|
||||
* Retrieves the average color from a token's symbol using various sources.
|
||||
*
|
||||
* @param {Token} token - The token for which to fetch the color.
|
||||
* @param {string} primarySrc - Primary source URL for color retrieval (optional).
|
||||
*
|
||||
* @returns {Promise< | null>} A promise that resolves to a color string or null if color cannot be determined.
|
||||
*/
|
||||
async function getColorFromToken(token: Token, primarySrc?: string): Promise<string | null> {
|
||||
if (!(token instanceof WrappedTokenInfo)) {
|
||||
return null
|
||||
}
|
||||
|
||||
const wrappedToken = token as WrappedTokenInfo
|
||||
const { address } = wrappedToken
|
||||
let { logoURI } = wrappedToken
|
||||
if (!logoURI) {
|
||||
if (token.chainId !== ChainId.MAINNET) {
|
||||
return null
|
||||
} else {
|
||||
logoURI = URIForEthToken(address)
|
||||
}
|
||||
}
|
||||
let color: string | null = null
|
||||
|
||||
try {
|
||||
return await getColorFromUriPath(logoURI)
|
||||
} catch (e) {
|
||||
if (logoURI === URIForEthToken(address)) {
|
||||
return null
|
||||
if (primarySrc) {
|
||||
const colorArray = await getColor(primarySrc)
|
||||
color = colorArray === DEFAULT_COLOR ? null : convertColorArrayToString(colorArray)
|
||||
}
|
||||
|
||||
try {
|
||||
logoURI = URIForEthToken(address)
|
||||
return await getColorFromUriPath(logoURI)
|
||||
if (!color && wrappedToken.logoURI) {
|
||||
const colorArray = await getColor(wrappedToken.logoURI)
|
||||
color = colorArray === DEFAULT_COLOR ? null : convertColorArrayToString(colorArray)
|
||||
}
|
||||
|
||||
if (!color && token.chainId === ChainId.MAINNET) {
|
||||
const colorArray = await getColor(URIForEthToken(wrappedToken.address))
|
||||
color = colorArray === DEFAULT_COLOR ? null : convertColorArrayToString(colorArray)
|
||||
}
|
||||
|
||||
return color
|
||||
} catch (error) {
|
||||
console.warn(`Unable to load logoURI (${token.symbol}): ${logoURI}`)
|
||||
console.warn(`Unable to load logoURI (${token.symbol}): ${primarySrc}, ${wrappedToken.logoURI}`)
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getColorFromUriPath(uri: string): Promise<string | null> {
|
||||
const formattedPath = uriToHttp(uri)[0]
|
||||
|
||||
let palette
|
||||
|
||||
try {
|
||||
palette = await Vibrant.from(formattedPath).getPalette()
|
||||
} catch (err) {
|
||||
return null
|
||||
}
|
||||
if (!palette?.Vibrant) {
|
||||
return 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
|
||||
function convertColorArrayToString([red, green, blue]: number[]): string {
|
||||
return rgb({ red, green, blue })
|
||||
}
|
||||
|
||||
export function useColor(token?: Token) {
|
||||
const [color, setColor] = useState('#2172E5')
|
||||
const [src] = useTokenLogoSource(token?.address, token?.chainId, token?.isNative)
|
||||
|
||||
useEffect(() => {
|
||||
let stale = false
|
||||
|
||||
if (token) {
|
||||
getColorFromToken(token).then((tokenColor) => {
|
||||
getColorFromToken(token, src).then((tokenColor) => {
|
||||
if (!stale && tokenColor !== null) {
|
||||
setColor(tokenColor)
|
||||
}
|
||||
@ -85,7 +72,7 @@ export function useColor(token?: Token) {
|
||||
stale = true
|
||||
setColor('#2172E5')
|
||||
}
|
||||
}, [token])
|
||||
}, [src, token])
|
||||
|
||||
return color
|
||||
}
|
||||
|
||||
89
src/test-utils/images.ts
Normal file
89
src/test-utils/images.ts
Normal file
@ -0,0 +1,89 @@
|
||||
export const arrayBufferBlackPng = new Uint8Array([
|
||||
137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137,
|
||||
0, 0, 0, 13, 73, 68, 65, 84, 8, 91, 99, 96, 96, 96, 248, 15, 0, 1, 4, 1, 0, 193, 45, 142, 80, 0, 0, 0, 0, 73, 69, 78,
|
||||
68, 174, 66, 96, 130,
|
||||
])
|
||||
|
||||
export const arrayBufferWhitePng = new Uint8Array([
|
||||
137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137,
|
||||
0, 0, 0, 11, 73, 68, 65, 84, 8, 91, 99, 248, 15, 4, 0, 9, 251, 3, 253, 159, 31, 44, 0, 0, 0, 0, 0, 73, 69, 78, 68,
|
||||
174, 66, 96, 130,
|
||||
])
|
||||
|
||||
export const arrayBufferBluePng = new Uint8Array([
|
||||
137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137,
|
||||
0, 0, 0, 13, 73, 68, 65, 84, 8, 91, 99, 96, 96, 248, 255, 31, 0, 3, 2, 1, 255, 120, 191, 70, 181, 0, 0, 0, 0, 73, 69,
|
||||
78, 68, 174, 66, 96, 130,
|
||||
])
|
||||
|
||||
export const arrayBufferPinkPng = new Uint8Array([
|
||||
137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 3, 0, 0, 0, 3, 8, 6, 0, 0, 0, 86, 40, 181, 191,
|
||||
0, 0, 0, 18, 73, 68, 65, 84, 8, 91, 99, 124, 102, 210, 243, 159, 1, 10, 24, 113, 114, 0, 185, 241, 7, 243, 212, 212,
|
||||
31, 166, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130,
|
||||
])
|
||||
|
||||
export const arrayBufferBlackJpg = new Uint8Array([
|
||||
255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 255, 219, 0, 67, 0, 1, 1, 1, 1, 1, 1, 1, 1,
|
||||
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
||||
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 255, 219, 0, 67, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
||||
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
||||
1, 1, 1, 1, 1, 1, 1, 1, 1, 255, 192, 0, 17, 8, 0, 1, 0, 1, 3, 1, 17, 0, 2, 17, 1, 3, 17, 1, 255, 196, 0, 31, 0, 0, 1,
|
||||
5, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 255, 196, 0, 181, 16, 0, 2, 1, 3, 3,
|
||||
2, 4, 3, 5, 5, 4, 4, 0, 0, 1, 125, 1, 2, 3, 0, 4, 17, 5, 18, 33, 49, 65, 6, 19, 81, 97, 7, 34, 113, 20, 50, 129, 145,
|
||||
161, 8, 35, 66, 177, 193, 21, 82, 209, 240, 36, 51, 98, 114, 130, 9, 10, 22, 23, 24, 25, 26, 37, 38, 39, 40, 41, 42,
|
||||
52, 53, 54, 55, 56, 57, 58, 67, 68, 69, 70, 71, 72, 73, 74, 83, 84, 85, 86, 87, 88, 89, 90, 99, 100, 101, 102, 103,
|
||||
104, 105, 106, 115, 116, 117, 118, 119, 120, 121, 122, 131, 132, 133, 134, 135, 136, 137, 138, 146, 147, 148, 149,
|
||||
150, 151, 152, 153, 154, 162, 163, 164, 165, 166, 167, 168, 169, 170, 178, 179, 180, 181, 182, 183, 184, 185, 186,
|
||||
194, 195, 196, 197, 198, 199, 200, 201, 202, 210, 211, 212, 213, 214, 215, 216, 217, 218, 225, 226, 227, 228, 229,
|
||||
230, 231, 232, 233, 234, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 255, 196, 0, 31, 1, 0, 3, 1, 1, 1, 1, 1, 1,
|
||||
1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 255, 196, 0, 181, 17, 0, 2, 1, 2, 4, 4, 3, 4, 7, 5, 4,
|
||||
4, 0, 1, 2, 119, 0, 1, 2, 3, 17, 4, 5, 33, 49, 6, 18, 65, 81, 7, 97, 113, 19, 34, 50, 129, 8, 20, 66, 145, 161, 177,
|
||||
193, 9, 35, 51, 82, 240, 21, 98, 114, 209, 10, 22, 36, 52, 225, 37, 241, 23, 24, 25, 26, 38, 39, 40, 41, 42, 53, 54,
|
||||
55, 56, 57, 58, 67, 68, 69, 70, 71, 72, 73, 74, 83, 84, 85, 86, 87, 88, 89, 90, 99, 100, 101, 102, 103, 104, 105, 106,
|
||||
115, 116, 117, 118, 119, 120, 121, 122, 130, 131, 132, 133, 134, 135, 136, 137, 138, 146, 147, 148, 149, 150, 151,
|
||||
152, 153, 154, 162, 163, 164, 165, 166, 167, 168, 169, 170, 178, 179, 180, 181, 182, 183, 184, 185, 186, 194, 195,
|
||||
196, 197, 198, 199, 200, 201, 202, 210, 211, 212, 213, 214, 215, 216, 217, 218, 226, 227, 228, 229, 230, 231, 232,
|
||||
233, 234, 242, 243, 244, 245, 246, 247, 248, 249, 250, 255, 218, 0, 12, 3, 1, 0, 2, 17, 3, 17, 0, 63, 0, 255, 0, 63,
|
||||
250, 0, 255, 217,
|
||||
])
|
||||
|
||||
export const arrayBufferBlackGif = new Uint8Array([
|
||||
71, 73, 70, 56, 57, 97, 1, 0, 1, 0, 247, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7,
|
||||
9, 9, 9, 10, 10, 10, 11, 11, 11, 13, 13, 13, 15, 15, 15, 17, 17, 17, 19, 19, 19, 21, 21, 21, 23, 23, 23, 26, 26, 26,
|
||||
29, 29, 29, 32, 32, 32, 33, 33, 33, 34, 34, 34, 35, 35, 35, 36, 36, 36, 37, 37, 37, 38, 38, 38, 39, 39, 39, 40, 40,
|
||||
40, 41, 41, 41, 42, 42, 42, 43, 43, 43, 44, 44, 44, 45, 45, 45, 46, 46, 46, 47, 47, 47, 48, 48, 48, 49, 49, 49, 50,
|
||||
50, 50, 51, 51, 51, 52, 52, 52, 53, 53, 53, 54, 54, 54, 55, 55, 55, 56, 56, 56, 57, 57, 57, 58, 58, 58, 59, 59, 59,
|
||||
60, 60, 60, 61, 61, 61, 62, 62, 62, 63, 63, 63, 64, 64, 64, 65, 65, 65, 66, 66, 66, 67, 67, 67, 68, 68, 68, 69, 69,
|
||||
69, 70, 70, 70, 71, 71, 71, 72, 72, 72, 73, 73, 73, 74, 74, 74, 75, 75, 75, 76, 76, 76, 77, 77, 77, 78, 78, 78, 79,
|
||||
79, 79, 80, 80, 80, 81, 81, 81, 82, 82, 82, 83, 83, 83, 84, 84, 84, 85, 85, 85, 86, 86, 86, 87, 87, 87, 88, 88, 88,
|
||||
89, 89, 89, 90, 90, 90, 91, 91, 91, 92, 92, 92, 93, 93, 93, 94, 94, 94, 95, 95, 95, 96, 96, 96, 97, 97, 97, 98, 98,
|
||||
98, 99, 99, 99, 100, 100, 100, 101, 101, 101, 102, 102, 102, 103, 103, 103, 104, 104, 104, 105, 105, 105, 106, 106,
|
||||
106, 107, 107, 107, 108, 108, 108, 109, 109, 109, 110, 110, 110, 111, 111, 111, 112, 112, 112, 113, 113, 113, 114,
|
||||
114, 114, 115, 115, 115, 116, 116, 116, 117, 117, 117, 118, 118, 118, 119, 119, 119, 120, 120, 120, 121, 121, 121,
|
||||
122, 122, 122, 123, 123, 123, 124, 124, 124, 125, 125, 125, 126, 126, 126, 127, 127, 127, 128, 128, 128, 129, 129,
|
||||
129, 130, 130, 130, 131, 131, 131, 132, 132, 132, 133, 133, 133, 134, 134, 134, 135, 135, 135, 136, 136, 136, 137,
|
||||
137, 137, 138, 138, 138, 139, 139, 139, 140, 140, 140, 141, 141, 141, 142, 142, 142, 143, 143, 143, 144, 144, 144,
|
||||
145, 145, 145, 146, 146, 146, 147, 147, 147, 148, 148, 148, 149, 149, 149, 150, 150, 150, 151, 151, 151, 152, 152,
|
||||
152, 153, 153, 153, 154, 154, 154, 155, 155, 155, 156, 156, 156, 157, 157, 157, 158, 158, 158, 159, 159, 159, 160,
|
||||
160, 160, 161, 161, 161, 162, 162, 162, 163, 163, 163, 164, 164, 164, 165, 165, 165, 166, 166, 166, 167, 167, 167,
|
||||
168, 168, 168, 169, 169, 169, 170, 170, 170, 171, 171, 171, 172, 172, 172, 173, 173, 173, 174, 174, 174, 175, 175,
|
||||
175, 176, 176, 176, 177, 177, 177, 178, 178, 178, 179, 179, 179, 180, 180, 180, 181, 181, 181, 182, 182, 182, 183,
|
||||
183, 183, 184, 184, 184, 185, 185, 185, 186, 186, 186, 187, 187, 187, 188, 188, 188, 189, 189, 189, 190, 190, 190,
|
||||
191, 191, 191, 192, 192, 192, 193, 193, 193, 194, 194, 194, 195, 195, 195, 196, 196, 196, 197, 197, 197, 198, 198,
|
||||
198, 199, 199, 199, 200, 200, 200, 201, 201, 201, 202, 202, 202, 203, 203, 203, 204, 204, 204, 205, 205, 205, 206,
|
||||
206, 206, 207, 207, 207, 208, 208, 208, 209, 209, 209, 210, 210, 210, 211, 211, 211, 212, 212, 212, 213, 213, 213,
|
||||
214, 214, 214, 215, 215, 215, 216, 216, 216, 217, 217, 217, 218, 218, 218, 219, 219, 219, 220, 220, 220, 221, 221,
|
||||
221, 222, 222, 222, 223, 223, 223, 224, 224, 224, 225, 225, 225, 226, 226, 226, 227, 227, 227, 228, 228, 228, 229,
|
||||
229, 229, 230, 230, 230, 231, 231, 231, 232, 232, 232, 233, 233, 233, 234, 234, 234, 235, 235, 235, 236, 236, 236,
|
||||
237, 237, 237, 238, 238, 238, 239, 239, 239, 240, 240, 240, 241, 241, 241, 242, 242, 242, 243, 243, 243, 244, 244,
|
||||
244, 245, 245, 245, 246, 246, 246, 247, 247, 247, 248, 248, 248, 249, 249, 249, 250, 250, 250, 251, 251, 251, 252,
|
||||
252, 252, 253, 253, 253, 254, 254, 254, 255, 255, 255, 33, 249, 4, 0, 0, 0, 0, 0, 33, 254, 31, 71, 101, 110, 101, 114,
|
||||
97, 116, 101, 100, 32, 98, 121, 32, 111, 110, 108, 105, 110, 101, 71, 73, 70, 116, 111, 111, 108, 115, 46, 99, 111,
|
||||
109, 0, 44, 0, 0, 0, 0, 1, 0, 1, 0, 0, 8, 4, 0, 11, 4, 4, 0, 59,
|
||||
])
|
||||
|
||||
export const arrayBufferBlackPngInvalid = new Uint8Array([
|
||||
137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 3, 0, 0, 0, 3, 8, 6, 0, 0, 0, 0, 0, 0, 5, 73,
|
||||
68, 65, 84, 0, 0, 0, 0, 49, 47, 4, 49, 0, 0, 0, 0, 73, 69, 78, 68,
|
||||
])
|
||||
80
src/utils/getColor.test.ts
Normal file
80
src/utils/getColor.test.ts
Normal file
@ -0,0 +1,80 @@
|
||||
import { DEFAULT_COLOR } from 'constants/tokenColors'
|
||||
import {
|
||||
arrayBufferBlackGif,
|
||||
arrayBufferBlackJpg,
|
||||
arrayBufferBlackPng,
|
||||
arrayBufferBlackPngInvalid,
|
||||
arrayBufferBluePng,
|
||||
arrayBufferPinkPng,
|
||||
arrayBufferWhitePng,
|
||||
} from 'test-utils/images'
|
||||
|
||||
import { getColor } from './getColor'
|
||||
|
||||
function getMockImageFetch(data: Uint8Array, dataType = 'image/png') {
|
||||
return () =>
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
status: 200,
|
||||
headers: {
|
||||
get: jest.fn().mockReturnValue(dataType),
|
||||
},
|
||||
arrayBuffer: jest.fn().mockResolvedValue(data),
|
||||
} as unknown as Response)
|
||||
}
|
||||
|
||||
test('should return the average color of a black PNG image', async () => {
|
||||
jest.spyOn(global, 'fetch').mockImplementation(getMockImageFetch(arrayBufferBlackPng))
|
||||
|
||||
const color = await getColor('fakeUrl')
|
||||
expect(color).toEqual([0, 0, 0])
|
||||
})
|
||||
|
||||
test('should return the average color of a blue PNG image', async () => {
|
||||
jest.spyOn(global, 'fetch').mockImplementation(getMockImageFetch(arrayBufferBluePng))
|
||||
|
||||
const color = await getColor('fakeUrl')
|
||||
expect(color).toEqual([0, 0, 255])
|
||||
})
|
||||
|
||||
test('should return the average color of a white PNG image', async () => {
|
||||
jest.spyOn(global, 'fetch').mockImplementation(getMockImageFetch(arrayBufferWhitePng))
|
||||
|
||||
const color = await getColor('fakeUrl')
|
||||
expect(color).toEqual([255, 255, 255])
|
||||
})
|
||||
|
||||
test('should return the average color of a white PNG image with whiteness dimmed', async () => {
|
||||
jest.spyOn(global, 'fetch').mockImplementation(getMockImageFetch(arrayBufferWhitePng))
|
||||
|
||||
const color = await getColor('fakeUrl', true)
|
||||
expect(color).toEqual(DEFAULT_COLOR)
|
||||
})
|
||||
|
||||
test('should return the average color of a black JPG image', async () => {
|
||||
jest.spyOn(global, 'fetch').mockImplementation(getMockImageFetch(arrayBufferBlackJpg, 'image/jpeg'))
|
||||
|
||||
const color = await getColor('fakeUrl')
|
||||
expect(color).toEqual([0, 0, 0])
|
||||
})
|
||||
|
||||
test('should return default color for a GIF image', async () => {
|
||||
jest.spyOn(global, 'fetch').mockImplementation(getMockImageFetch(arrayBufferBlackGif))
|
||||
|
||||
const color = await getColor('fakeUrl')
|
||||
expect(color).toEqual(DEFAULT_COLOR)
|
||||
})
|
||||
|
||||
test('should return default color for a invalid image', async () => {
|
||||
jest.spyOn(global, 'fetch').mockImplementation(getMockImageFetch(arrayBufferBlackPngInvalid))
|
||||
|
||||
const color = await getColor('fakeUrl')
|
||||
expect(color).toEqual(DEFAULT_COLOR)
|
||||
})
|
||||
|
||||
test('should return pink for a pink PNG image', async () => {
|
||||
jest.spyOn(global, 'fetch').mockImplementation(getMockImageFetch(arrayBufferPinkPng))
|
||||
|
||||
const color = await getColor('fakeUrl')
|
||||
expect(color).toEqual([230, 52, 140])
|
||||
})
|
||||
@ -2,9 +2,9 @@ import { Buffer } from 'buffer'
|
||||
import JPEG from 'jpeg-js'
|
||||
import PNG from 'png-ts'
|
||||
|
||||
import { DEFAULT_COLOR, predefinedTokenColors } from '../constants'
|
||||
import { DEFAULT_COLOR, predefinedTokenColors } from '../constants/tokenColors'
|
||||
|
||||
export default async function getColor(image: string | undefined, checkDistance = false) {
|
||||
export async function getColor(image: string | undefined, checkDistance = false) {
|
||||
if (!image) {
|
||||
return DEFAULT_COLOR
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user