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

add new token image to widget (#3433)

Browse Source
This commit is contained in:
Jordan Frankfurt 2022-03-04 12:14:31 -05:00 committed by GitHub
parent 27b831b301
commit 29ae755f2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/lib/assets/missing-token-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

13
src/lib/components/TokenImg.tsx
View File

@ -1,17 +1,18 @@
import { Currency } from '@uniswap/sdk-core'
import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
import { Slash } from 'lib/icons'
import { MissingToken } from 'lib/icons'
import styled from 'lib/theme'
import { useCallback, useEffect, useState } from 'react'
const badSrcs = new Set<string>()
interface TokenImgProps {
className?: string
interface BaseProps {
token: Currency
}
function TokenImg({ className, token }: TokenImgProps) {
type TokenImgProps = BaseProps & Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof BaseProps>
function TokenImg({ token, ...rest }: TokenImgProps) {
const srcs = useCurrencyLogoURIs(token)
const [src, setSrc] = useState<string | undefined>()
useEffect(() => {
@ -23,9 +24,9 @@ function TokenImg({ className, token }: TokenImgProps) {
}, [src, srcs])
if (src) {
return <img className={className} src={src} alt={token.name || token.symbol} onError={onError} />
return <img src={src} alt={token.name || token.symbol} onError={onError} {...rest} />
}
return <Slash className={className} color="secondary" />
return <MissingToken color="secondary" {...rest} />
}
export default styled(TokenImg)<{ size?: number }>`

8
src/lib/icons/index.tsx
View File

@ -1,3 +1,4 @@
import MissingTokenIcon from 'lib/assets/missing-token-image.png'
import { ReactComponent as RouterIcon } from 'lib/assets/svg/auto_router.svg'
import { ReactComponent as CheckIcon } from 'lib/assets/svg/check.svg'
import { ReactComponent as ExpandoIcon } from 'lib/assets/svg/expando.svg'
@ -31,6 +32,10 @@ import {
type SVGIcon = FunctionComponent<SVGProps<SVGSVGElement>>
const StyledImage = styled.img`
height: 1em;
width: 1em;
`
function icon(Icon: FeatherIcon | SVGIcon) {
return styled(Icon)<{ color?: Color }>`
clip-path: stroke-box;
@ -91,6 +96,9 @@ export const Trash2 = icon(Trash2Icon)
export const Wallet = icon(WalletIcon)
export const X = icon(XIcon)
export const XOctagon = icon(XOctagonIcon)
export const MissingToken = (props: React.ImgHTMLAttributes<HTMLImageElement>) => (
<StyledImage src={MissingTokenIcon} alt="Missing token" {...props} />
)
export const Check = styled(icon(CheckIcon))`
circle {