Skip to content

Commit f5c4468

Browse files
moodysalemmoodysalem
committed
fix(token logo): fix persistent error state in token logo, clean up swap route code
1 parent 852e8f7 commit f5c4468

File tree

3 files changed

+62
-61
lines changed

3 files changed

+62
-61
lines changed

‎src/components/TokenLogo/index.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { WETH } from '@uniswap/sdk'
66

77
import EthereumLogo from '../../assets/images/ethereum-logo.png'
88

9-
const TOKEN_ICON_API = address =>
9+
const getTokenLogoURL = address =>
1010
`https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
11-
const BAD_IMAGES = {}
11+
const NO_LOGO_ADDRESSES: { [tokenAddress: string]: true } = {}
1212

1313
const Image = styled.img<{ size: string }>`
1414
width: ${({ size }) => size};
@@ -44,20 +44,16 @@ export default function TokenLogo({
4444
size?: string
4545
style?: React.CSSProperties
4646
}) {
47-
const [error, setError] = useState(false)
47+
const [, refresh] = useState<number>(0)
4848
const { chainId } = useActiveWeb3React()
4949

50-
// mock rinkeby DAI
51-
if (chainId === 4 && address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') {
52-
address = '0x6B175474E89094C44Da98b954EedeAC495271d0F'
53-
}
54-
5550
let path = ''
51+
const validated = isAddress(address)
5652
// hard code to show ETH instead of WETH in UI
57-
if (address === WETH[chainId].address) {
53+
if (validated === WETH[chainId].address) {
5854
return <StyledEthereumLogo src={EthereumLogo} size={size} {...rest} />
59-
} else if (!error && !BAD_IMAGES[address] && isAddress(address)) {
60-
path = TOKEN_ICON_API(address)
55+
} else if (!NO_LOGO_ADDRESSES[address] && validated) {
56+
path = getTokenLogoURL(validated)
6157
} else {
6258
return (
6359
<Emoji {...rest} size={size}>
@@ -75,8 +71,8 @@ export default function TokenLogo({
7571
src={path}
7672
size={size}
7773
onError={() => {
78-
BAD_IMAGES[address] = true
79-
setError(true)
74+
NO_LOGO_ADDRESSES[address] = true
75+
refresh(i => i + 1)
8076
}}
8177
/>
8278
)

‎src/components/swap/AdvancedSwapDetails.tsx‎

Lines changed: 15 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import { Trade, TradeType } from '@uniswap/sdk'
22
import React, { useContext } from 'react'
3-
import { ChevronRight } from 'react-feather'
4-
import { Flex } from 'rebass'
53
import { ThemeContext } from 'styled-components'
64
import { Field } from '../../state/swap/actions'
5+
import { useUserSlippageTolerance } from '../../state/user/hooks'
76
import { TYPE } from '../../theme'
87
import { computeSlippageAdjustedAmounts, computeTradePriceBreakdown } from '../../utils/prices'
98
import { AutoColumn } from '../Column'
10-
import { SectionBreak } from './styleds'
119
import QuestionHelper from '../QuestionHelper'
1210
import { RowBetween, RowFixed } from '../Row'
1311
import FormattedPriceImpact from './FormattedPriceImpact'
14-
import TokenLogo from '../TokenLogo'
15-
import flatMap from 'lodash.flatmap'
16-
import { useUserSlippageTolerance } from '../../state/user/hooks'
12+
import { SectionBreak } from './styleds'
13+
import SwapRoute from './SwapRoute'
1714

1815
function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippage: number }) {
1916
const theme = useContext(ThemeContext)
@@ -79,49 +76,19 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
7976
return (
8077
<AutoColumn gap="md">
8178
{trade && <TradeSummary trade={trade} allowedSlippage={allowedSlippage} />}
82-
{showRoute && <SectionBreak />}
8379
{showRoute && (
84-
<AutoColumn style={{ padding: '0 24px' }}>
85-
<RowFixed>
86-
<TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
87-
Route
88-
</TYPE.black>
89-
<QuestionHelper text="Routing through these tokens resulted in the best price for your trade." />
90-
</RowFixed>
91-
<Flex
92-
px="1rem"
93-
py="0.5rem"
94-
my="0.5rem"
95-
style={{ border: `1px solid ${theme.bg3}`, borderRadius: '1rem' }}
96-
flexWrap="wrap"
97-
width="100%"
98-
justifyContent="space-evenly"
99-
alignItems="center"
100-
>
101-
{flatMap(
102-
trade.route.path,
103-
// add a null in-between each item
104-
(token, i, array) => {
105-
const lastItem = i === array.length - 1
106-
return lastItem ? [token] : [token, null]
107-
}
108-
).map((token, i) => {
109-
// use null as an indicator to insert chevrons
110-
if (token === null) {
111-
return <ChevronRight key={i} color={theme.text2} />
112-
} else {
113-
return (
114-
<Flex my="0.5rem" alignItems="center" key={token.address} style={{ flexShrink: 0 }}>
115-
<TokenLogo address={token.address} size="1.5rem" />
116-
<TYPE.black fontSize={14} color={theme.text1} ml="0.5rem">
117-
{token.symbol}
118-
</TYPE.black>
119-
</Flex>
120-
)
121-
}
122-
})}
123-
</Flex>
124-
</AutoColumn>
80+
<>
81+
<SectionBreak />
82+
<AutoColumn style={{ padding: '0 24px' }}>
83+
<RowFixed>
84+
<TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
85+
Route
86+
</TYPE.black>
87+
<QuestionHelper text="Routing through these tokens resulted in the best price for your trade." />
88+
</RowFixed>
89+
<SwapRoute trade={trade} />
90+
</AutoColumn>
91+
</>
12592
)}
12693
</AutoColumn>
12794
)

‎src/components/swap/SwapRoute.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Trade } from '@uniswap/sdk'
2+
import React, { Fragment, memo, useContext } from 'react'
3+
import { ChevronRight } from 'react-feather'
4+
import { Flex } from 'rebass'
5+
import { ThemeContext } from 'styled-components'
6+
import { TYPE } from '../../theme'
7+
import TokenLogo from '../TokenLogo'
8+
9+
export default memo(function SwapRoute({ trade }: { trade: Trade }) {
10+
const theme = useContext(ThemeContext)
11+
return (
12+
<Flex
13+
px="1rem"
14+
py="0.5rem"
15+
my="0.5rem"
16+
style={{ border: `1px solid ${theme.bg3}`, borderRadius: '1rem' }}
17+
flexWrap="wrap"
18+
width="100%"
19+
justifyContent="space-evenly"
20+
alignItems="center"
21+
>
22+
{trade.route.path.map((token, i, path) => {
23+
const isLastItem: boolean = i === path.length - 1
24+
return (
25+
<Fragment key={i}>
26+
<Flex my="0.5rem" alignItems="center" key={token.address} style={{ flexShrink: 0 }}>
27+
<TokenLogo address={token.address} size="1.5rem" />
28+
<TYPE.black fontSize={14} color={theme.text1} ml="0.5rem">
29+
{token.symbol}
30+
</TYPE.black>
31+
</Flex>
32+
{isLastItem ? null : <ChevronRight key={i} color={theme.text2} />}
33+
</Fragment>
34+
)
35+
})}
36+
</Flex>
37+
)
38+
})

0 commit comments

Comments
 (0)