fix: show logos on warned tokens (#6978)
* fix: show logos on warned tokens * test: update snapshots * fix: hide logos for unsupported tokens
This commit is contained in:
parent
b906cddc6a
commit
2ef9e9b61c
@ -84,7 +84,7 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
|
||||
/>
|
||||
<img
|
||||
class="c2 c3"
|
||||
src="blank_token.svg"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/arbitrum/assets/0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8/logo.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
@ -79,16 +79,11 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
|
||||
}
|
||||
|
||||
.c11 {
|
||||
--size: 36px;
|
||||
border-radius: 100px;
|
||||
color: #0D111C;
|
||||
background-color: #E8ECFB;
|
||||
font-size: calc(var(--size) / 3);
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
|
||||
box-shadow: 0 0 1px white;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
@ -160,11 +155,11 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<div
|
||||
<img
|
||||
alt="ABC logo"
|
||||
class="c11"
|
||||
>
|
||||
ABC
|
||||
</div>
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -203,11 +198,11 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<div
|
||||
<img
|
||||
alt="DEF logo"
|
||||
class="c11"
|
||||
>
|
||||
DEF
|
||||
</div>
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -252,7 +247,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
color: #0D111C;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c12 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
@ -296,19 +291,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
grid-row-gap: 8px;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
--size: 36px;
|
||||
border-radius: 100px;
|
||||
color: #0D111C;
|
||||
background-color: #E8ECFB;
|
||||
font-size: calc(var(--size) / 3);
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@ -336,7 +318,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c13 {
|
||||
margin: 16px 2px 24px 2px;
|
||||
}
|
||||
|
||||
@ -429,16 +411,16 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<div
|
||||
class="c12"
|
||||
>
|
||||
DEF
|
||||
</div>
|
||||
<img
|
||||
alt="DEF logo"
|
||||
class="c11"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c13 c14"
|
||||
class="c12 c13"
|
||||
/>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
@ -523,16 +505,11 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
|
||||
}
|
||||
|
||||
.c11 {
|
||||
--size: 36px;
|
||||
border-radius: 100px;
|
||||
color: #0D111C;
|
||||
background-color: #E8ECFB;
|
||||
font-size: calc(var(--size) / 3);
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
|
||||
box-shadow: 0 0 1px white;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
@ -604,11 +581,11 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<div
|
||||
<img
|
||||
alt="ABC logo"
|
||||
class="c11"
|
||||
>
|
||||
ABC
|
||||
</div>
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -647,11 +624,11 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<div
|
||||
<img
|
||||
alt="GHI logo"
|
||||
class="c11"
|
||||
>
|
||||
GHI
|
||||
</div>
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,12 +1,12 @@
|
||||
import tokenLogoLookup from 'constants/tokenLogoLookup'
|
||||
import { isCelo, nativeOnChain } from 'constants/tokens'
|
||||
import { checkWarning, WARNING_LEVEL } from 'constants/tokenSafety'
|
||||
import { chainIdToNetworkName, getNativeLogoURI } from 'lib/hooks/useCurrencyLogoURIs'
|
||||
import uriToHttp from 'lib/utils/uriToHttp'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { isAddress } from 'utils'
|
||||
|
||||
import celoLogo from '../assets/svg/celo_logo.svg'
|
||||
import { checkWarning } from '../constants/tokenSafety'
|
||||
|
||||
const BAD_SRCS: { [tokenAddress: string]: true } = {}
|
||||
|
||||
@ -66,17 +66,17 @@ export default function useAssetLogoSource(
|
||||
isNative?: boolean,
|
||||
backupImg?: string | null
|
||||
): [string | undefined, () => void] {
|
||||
const showLogo = Boolean((address && checkWarning(address, chainId) === null) || isNative)
|
||||
const hideLogo = Boolean(address && checkWarning(address, chainId)?.level === WARNING_LEVEL.BLOCKED)
|
||||
const [current, setCurrent] = useState<string | undefined>(
|
||||
showLogo ? getInitialUrl(address, chainId, isNative, backupImg) : undefined
|
||||
hideLogo ? undefined : getInitialUrl(address, chainId, isNative, backupImg)
|
||||
)
|
||||
const [fallbackSrcs, setFallbackSrcs] = useState<string[] | undefined>(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
if (!showLogo) return
|
||||
if (hideLogo) return
|
||||
setCurrent(getInitialUrl(address, chainId, isNative))
|
||||
setFallbackSrcs(undefined)
|
||||
}, [address, chainId, isNative, showLogo])
|
||||
}, [address, chainId, hideLogo, isNative])
|
||||
|
||||
const nextSrc = useCallback(() => {
|
||||
if (current) {
|
||||
|
Loading…
Reference in New Issue
Block a user