forked from Uniswap/info
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
88 lines (75 loc) · 2.09 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { isAddress } from '../../utils/index.js'
import PlaceHolder from '../../assets/placeholder.png'
import EthereumLogo from '../../assets/new.png'
import { WNEW_ADDRESS, LOGO_URL } from '../../constants'
const BAD_IMAGES = {}
const Inline = styled.div`
display: flex;
align-items: center;
align-self: center;
`
const Image = styled.img`
width: ${({ size }) => size};
height: ${({ size }) => size};
background-color: white;
border-radius: 50%;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
`
const StyledEthereumLogo = styled.div`
display: flex;
align-items: center;
justify-content: center;
> img {
width: ${({ size }) => size};
height: ${({ size }) => size};
}
`
export default function TokenLogo({ address, header = false, size = '24px', ...rest }) {
const [error, setError] = useState(false)
useEffect(() => {
setError(false)
}, [address])
if (error || BAD_IMAGES[address]) {
return (
<Inline>
<Image {...rest} alt={''} src={PlaceHolder} size={size} />
</Inline>
)
}
// hard coded fixes for trust wallet api issues
if (address?.toLowerCase() === '0x5e74c9036fb86bd7ecdcb084a0673efc32ea31cb') {
address = '0x42456d7084eacf4083f1140d3229471bba2949a8'
}
if (address?.toLowerCase() === '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f') {
address = '0xc011a72400e58ecd99ee497cf89e3775d4bd732f'
}
if (address?.toLowerCase() === WNEW_ADDRESS) {
return (
<StyledEthereumLogo size={size} {...rest}>
<img
src={EthereumLogo}
style={{ boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.075)', borderRadius: '24px' }}
alt=""
/>
</StyledEthereumLogo>
)
}
const path = LOGO_URL + `/${ isAddress(address) }/logo.png`
return (
<Inline>
<Image
{...rest}
alt={''}
src={path}
size={size}
onError={event => {
BAD_IMAGES[address] = true
setError(true)
event.preventDefault()
}}
/>
</Inline>
)
}