fix(token logo): fix persistent error state in token logo, clean up swap route code

src/components/TokenLogo/index.tsx

@@ -6,9 +6,9 @@ import { WETH } from '@uniswap/sdk'
 
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
 
-const TOKEN_ICON_API = address =>
+const getTokenLogoURL = address =>
   `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
-const BAD_IMAGES = {}
+const NO_LOGO_ADDRESSES: { [tokenAddress: string]: true } = {}
 
 const Image = styled.img<{ size: string }>`
   width: ${({ size }) => size};
@@ -44,20 +44,16 @@ export default function TokenLogo({
   size?: string
   style?: React.CSSProperties
 }) {
-  const [error, setError] = useState(false)
+  const [, refresh] = useState<number>(0)
   const { chainId } = useActiveWeb3React()
 
-  // mock rinkeby DAI
-  if (chainId === 4 && address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') {
-    address = '0x6B175474E89094C44Da98b954EedeAC495271d0F'
-  }
-
   let path = ''
+  const validated = isAddress(address)
   // hard code to show ETH instead of WETH in UI
-  if (address === WETH[chainId].address) {
+  if (validated === WETH[chainId].address) {
     return <StyledEthereumLogo src={EthereumLogo} size={size} {...rest} />
-  } else if (!error && !BAD_IMAGES[address] && isAddress(address)) {
-    path = TOKEN_ICON_API(address)
+  } else if (!NO_LOGO_ADDRESSES[address] && validated) {
+    path = getTokenLogoURL(validated)
   } else {
     return (
       <Emoji {...rest} size={size}>
@@ -75,8 +71,8 @@ export default function TokenLogo({
       src={path}
       size={size}
       onError={() => {
-        BAD_IMAGES[address] = true
-        setError(true)
+        NO_LOGO_ADDRESSES[address] = true
+        refresh(i => i + 1)
       }}
     />
   )

src/components/swap/AdvancedSwapDetails.tsx

 import { Trade, TradeType } from '@uniswap/sdk'
 import React, { useContext } from 'react'
-import { ChevronRight } from 'react-feather'
-import { Flex } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { Field } from '../../state/swap/actions'
+import { useUserSlippageTolerance } from '../../state/user/hooks'
 import { TYPE } from '../../theme'
 import { computeSlippageAdjustedAmounts, computeTradePriceBreakdown } from '../../utils/prices'
 import { AutoColumn } from '../Column'
-import { SectionBreak } from './styleds'
 import QuestionHelper from '../QuestionHelper'
 import { RowBetween, RowFixed } from '../Row'
 import FormattedPriceImpact from './FormattedPriceImpact'
-import TokenLogo from '../TokenLogo'
-import flatMap from 'lodash.flatmap'
-import { useUserSlippageTolerance } from '../../state/user/hooks'
+import { SectionBreak } from './styleds'
+import SwapRoute from './SwapRoute'
 
 function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippage: number }) {
   const theme = useContext(ThemeContext)
@@ -79,8 +76,9 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
   return (
     <AutoColumn gap="md">
       {trade && <TradeSummary trade={trade} allowedSlippage={allowedSlippage} />}
-      {showRoute && <SectionBreak />}
       {showRoute && (
+        <>
+          <SectionBreak />
           <AutoColumn style={{ padding: '0 24px' }}>
             <RowFixed>
               <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
@@ -88,40 +86,9 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
               </TYPE.black>
               <QuestionHelper text="Routing through these tokens resulted in the best price for your trade." />
             </RowFixed>
-          <Flex
-            px="1rem"
-            py="0.5rem"
-            my="0.5rem"
-            style={{ border: `1px solid ${theme.bg3}`, borderRadius: '1rem' }}
-            flexWrap="wrap"
-            width="100%"
-            justifyContent="space-evenly"
-            alignItems="center"
-          >
-            {flatMap(
-              trade.route.path,
-              // add a null in-between each item
-              (token, i, array) => {
-                const lastItem = i === array.length - 1
-                return lastItem ? [token] : [token, null]
-              }
-            ).map((token, i) => {
-              // use null as an indicator to insert chevrons
-              if (token === null) {
-                return <ChevronRight key={i} color={theme.text2} />
-              } else {
-                return (
-                  <Flex my="0.5rem" alignItems="center" key={token.address} style={{ flexShrink: 0 }}>
-                    <TokenLogo address={token.address} size="1.5rem" />
-                    <TYPE.black fontSize={14} color={theme.text1} ml="0.5rem">
-                      {token.symbol}
-                    </TYPE.black>
-                  </Flex>
-                )
-              }
-            })}
-          </Flex>
+            <SwapRoute trade={trade} />
           </AutoColumn>
+        </>
       )}
     </AutoColumn>
   )

src/components/swap/SwapRoute.tsx

+import { Trade } from '@uniswap/sdk'
+import React, { Fragment, memo, useContext } from 'react'
+import { ChevronRight } from 'react-feather'
+import { Flex } from 'rebass'
+import { ThemeContext } from 'styled-components'
+import { TYPE } from '../../theme'
+import TokenLogo from '../TokenLogo'
+
+export default memo(function SwapRoute({ trade }: { trade: Trade }) {
+  const theme = useContext(ThemeContext)
+  return (
+    <Flex
+      px="1rem"
+      py="0.5rem"
+      my="0.5rem"
+      style={{ border: `1px solid ${theme.bg3}`, borderRadius: '1rem' }}
+      flexWrap="wrap"
+      width="100%"
+      justifyContent="space-evenly"
+      alignItems="center"
+    >
+      {trade.route.path.map((token, i, path) => {
+        const isLastItem: boolean = i === path.length - 1
+        return (
+          <Fragment key={i}>
+            <Flex my="0.5rem" alignItems="center" key={token.address} style={{ flexShrink: 0 }}>
+              <TokenLogo address={token.address} size="1.5rem" />
+              <TYPE.black fontSize={14} color={theme.text1} ml="0.5rem">
+                {token.symbol}
+              </TYPE.black>
+            </Flex>
+            {isLastItem ? null : <ChevronRight key={i} color={theme.text2} />}
+          </Fragment>
+        )
+      })}
+    </Flex>
+  )
+})