add route visualization (#808)

* add route visualization

* add border, only show if >2 tokens in the path

* fix flex styles

* more flex tweaks

src/components/SlippageTabs/index.tsx

-import React, { useState, useEffect, useRef, useCallback } from 'react'
-import styled, { css } from 'styled-components'
+import React, { useState, useEffect, useRef, useCallback, useContext } from 'react'
+import styled, { ThemeContext } from 'styled-components'
 
 import QuestionHelper from '../Question'
 import { Text } from 'rebass'
@@ -57,27 +57,9 @@ const Input = styled.input<{ active?: boolean }>`
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
   }
-  cursor: inherit;
-  color: ${({ theme }) => theme.text1};
-  text-align: left;
-  ${({ active }) =>
-    active &&
-    css`
-      color: initial;
-      cursor: initial;
-      text-align: right;
-    `}
-  ${({ placeholder }) =>
-    placeholder !== 'Custom' &&
-    css`
-      text-align: right;
-      color: ${({ theme }) => theme.text1};
-    `}
-  ${({ color }) =>
-    color === 'red' &&
-    css`
-      color: ${({ theme }) => theme.red1};
-    `}
+  color: ${({ active, theme, color }) => (color === 'red' ? theme.red1 : active ? 'initial' : theme.text1)};
+  cursor: ${({ active }) => (active ? 'initial' : 'inherit')};
+  text-align: ${({ active }) => (active ? 'right' : 'left')};
 `
 
 const BottomError = styled(Text)<{ show?: boolean }>`
@@ -109,18 +91,9 @@ const SlippageSelector = styled.div`
 `
 
 const Percent = styled.div`
-  color: inherit;
+  color: ${({ color, theme }) => (color === 'faded' ? theme.bg1 : color === 'red' ? theme.red1 : 'inherit')};
   font-size: 0, 8rem;
   flex-grow: 0;
-  ${({ color, theme }) =>
-    (color === 'faded' &&
-      css`
-        color: ${theme.bg1};
-      `) ||
-    (color === 'red' &&
-      css`
-        color: ${theme.red1};
-      `)};
 `
 
 export interface SlippageTabsProps {
@@ -131,6 +104,7 @@ export interface SlippageTabsProps {
 }
 
 export default function SlippageTabs({ setRawSlippage, rawSlippage, deadline, setDeadline }: SlippageTabsProps) {
+  const theme = useContext(ThemeContext)
   const [activeIndex, setActiveIndex] = useState(2)
 
   const [warningType, setWarningType] = useState(WARNING_TYPE.none)
@@ -360,7 +334,9 @@ export default function SlippageTabs({ setRawSlippage, rawSlippage, deadline, se
       </SlippageSelector>
       <AutoColumn gap="sm">
         <RowFixed padding={'0 20px'}>
-          <TYPE.body fontSize={14}>Deadline</TYPE.body>
+          <TYPE.black fontSize={14} color={theme.text2}>
+            Deadline
+          </TYPE.black>
           <QuestionHelper text="Deadline in minutes. If your transaction takes longer than this it will revert." />
         </RowFixed>
         <RowFixed padding={'0 20px'}>

src/components/swap/AdvancedSwapDetails.tsx

 import { Trade, TradeType } from '@uniswap/sdk'
 import React, { useContext } from 'react'
-import { ChevronUp } from 'react-feather'
-import { Text } from 'rebass'
+import { ChevronUp, ChevronRight } from 'react-feather'
+import { Text, Flex } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { Field } from '../../state/swap/actions'
 import { CursorPointer, TYPE } from '../../theme'
@@ -12,6 +12,7 @@ import QuestionHelper from '../Question'
 import { RowBetween, RowFixed } from '../Row'
 import SlippageTabs, { SlippageTabsProps } from '../SlippageTabs'
 import FormattedPriceImpact from './FormattedPriceImpact'
+import TokenLogo from '../TokenLogo'
 
 export interface AdvancedSwapDetailsProps extends SlippageTabsProps {
   trade: Trade
@@ -66,6 +67,7 @@ export function AdvancedSwapDetails({ trade, onDismiss, ...slippageTabProps }: A
           </RowFixed>
           <FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
         </RowBetween>
+
         <RowBetween>
           <RowFixed>
             <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
@@ -78,7 +80,9 @@ export function AdvancedSwapDetails({ trade, onDismiss, ...slippageTabProps }: A
           </TYPE.black>
         </RowBetween>
       </AutoColumn>
+
       <SectionBreak />
+
       <RowFixed padding={'0 20px'}>
         <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}>
           Set slippage tolerance
@@ -86,6 +90,49 @@ export function AdvancedSwapDetails({ trade, onDismiss, ...slippageTabProps }: A
         <QuestionHelper text="Your transaction will revert if the execution price changes by more than this amount after you submit your trade." />
       </RowFixed>
       <SlippageTabs {...slippageTabProps} />
+
+      {trade.route.path.length > 2 && (
+        <AutoColumn style={{ padding: '0 20px' }}>
+          <RowFixed>
+            <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
+              Route
+            </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"
+          >
+            {trade.route.path
+              // add a null in-between each item
+              .flatMap((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>
+        </AutoColumn>
+      )}
     </AutoColumn>
   )
 }