ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

* uncomment section removed for testing

* update snapshot
This commit is contained in:
Charles Bachmeier 2023-10-10 12:24:57 -07:00 committed by GitHub
parent b38ce038e6
commit 24ddace1eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/hooks/useColor.ts
View File

@ -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
}

9
src/pages/PoolDetails/PoolDetailsStats.tsx
View File

@ -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

4
src/pages/PoolDetails/__snapshots__/PoolDetailsStats.test.tsx.snap
View File

@ -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;

4
src/pages/PoolDetails/__snapshots__/index.test.tsx.snap
View File

@ -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;