some tweaks to the token logo

This commit is contained in:
Moody Salem 2021-04-29 10:26:12 -05:00
parent 8b4bc167c5
commit c5424d2dcc
No known key found for this signature in database
GPG Key ID: 8CB5CD10385138DB
4 changed files with 15 additions and 9 deletions

@ -216,10 +216,13 @@ export default function CurrencyInputPanel({
<TYPE.body color={theme.text3} fontWeight={500} fontSize={14}> <TYPE.body color={theme.text3} fontWeight={500} fontSize={14}>
{label} {label}
</TYPE.body> </TYPE.body>
{fiatValueOfTypedAmount ? <TYPE.label>${fiatValueOfTypedAmount?.toFixed(2)}</TYPE.label> : null} <TYPE.label>
{fiatValueOfTypedAmount ? '~' : ''}${fiatValueOfTypedAmount?.toSignificant(4) ?? '-'}
</TYPE.label>
</RowBetween> </RowBetween>
</LabelRow> </LabelRow>
)} )}
<InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}> <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
<CurrencySelect <CurrencySelect
selected={!!currency} selected={!!currency}

@ -1,7 +1,6 @@
import { Currency, ETHER, Token } from '@uniswap/sdk-core' import { ChainId, Currency, ETHER, Token } from '@uniswap/sdk-core'
import React, { useMemo } from 'react' import React, { useMemo } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import EthereumLogo from '../../assets/images/ethereum-logo.png' import EthereumLogo from '../../assets/images/ethereum-logo.png'
import useHttpLocations from '../../hooks/useHttpLocations' import useHttpLocations from '../../hooks/useHttpLocations'
import { WrappedTokenInfo } from '../../state/lists/hooks' import { WrappedTokenInfo } from '../../state/lists/hooks'
@ -41,10 +40,11 @@ export default function CurrencyLogo({
if (currency === ETHER) return [] if (currency === ETHER) return []
if (currency instanceof Token) { if (currency instanceof Token) {
const defaultUrls = currency.chainId === ChainId.MAINNET ? [getTokenLogoURL(currency.address)] : []
if (currency instanceof WrappedTokenInfo) { if (currency instanceof WrappedTokenInfo) {
return [...uriLocations, getTokenLogoURL(currency.address)] return [...uriLocations, ...defaultUrls]
} }
return [getTokenLogoURL(currency.address)] return defaultUrls
} }
return [] return []
}, [currency, uriLocations]) }, [currency, uriLocations])

@ -1,6 +1,7 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { HelpCircle } from 'react-feather' import { Slash } from 'react-feather'
import { ImageProps } from 'rebass' import { ImageProps } from 'rebass'
import useTheme from '../../hooks/useTheme'
const BAD_SRCS: { [tokenAddress: string]: true } = {} const BAD_SRCS: { [tokenAddress: string]: true } = {}
@ -11,9 +12,11 @@ export interface LogoProps extends Pick<ImageProps, 'style' | 'alt' | 'className
/** /**
* Renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert * Renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert
*/ */
export default function Logo({ srcs, alt, ...rest }: LogoProps) { export default function Logo({ srcs, alt, style, ...rest }: LogoProps) {
const [, refresh] = useState<number>(0) const [, refresh] = useState<number>(0)
const theme = useTheme()
const src: string | undefined = srcs.find((src) => !BAD_SRCS[src]) const src: string | undefined = srcs.find((src) => !BAD_SRCS[src])
if (src) { if (src) {
@ -30,5 +33,5 @@ export default function Logo({ srcs, alt, ...rest }: LogoProps) {
) )
} }
return <HelpCircle {...rest} /> return <Slash {...rest} style={{ ...style, color: theme.bg4 }} />
} }

@ -6,7 +6,7 @@ import { Token, ChainId } from '@uniswap/sdk-core'
import uriToHttp from 'utils/uriToHttp' import uriToHttp from 'utils/uriToHttp'
async function getColorFromToken(token: Token): Promise<string | null> { async function getColorFromToken(token: Token): Promise<string | null> {
if (token.chainId === ChainId.RINKEBY && token.address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') { if (token.chainId !== ChainId.MAINNET) {
return Promise.resolve('#FAAB14') return Promise.resolve('#FAAB14')
} }