feat: simplify routing api ux

src/components/Popover/index.tsx

@@ -11,11 +11,8 @@ const PopoverContainer = styled.div<{ show: boolean }>`
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;
-  background: ${({ theme }) => theme.bg2};
-  border: 1px solid ${({ theme }) => theme.bg3};
   box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
   color: ${({ theme }) => theme.text2};
-  border-radius: 8px;
 `
 
 const ReferenceElement = styled.div`
@@ -78,9 +75,10 @@ export interface PopoverProps {
   show: boolean
   children: React.ReactNode
   placement?: Placement
+  showArrow?: boolean
 }
 
-export default function Popover({ content, show, children, placement = 'auto' }: PopoverProps) {
+export default function Popover({ content, show, children, placement = 'auto', showArrow = true }: PopoverProps) {
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null)
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
   const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
@@ -103,12 +101,14 @@ export default function Popover({ content, show, children, placement = 'auto' }:
       <Portal>
         <PopoverContainer show={show} ref={setPopperElement as any} style={styles.popper} {...attributes.popper}>
           {content}
-          <Arrow
-            className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
-            ref={setArrowElement as any}
-            style={styles.arrow}
-            {...attributes.arrow}
-          />
+          {showArrow && (
+            <Arrow
+              className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
+              ref={setArrowElement as any}
+              style={styles.arrow}
+              {...attributes.arrow}
+            />
+          )}
         </PopoverContainer>
       </Portal>
     </>

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -1,13 +1,9 @@
 import { Currency, Percent } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import Badge from 'components/Badge'
-import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import Row, { AutoRow } from 'components/Row'
-import { MouseoverTooltipContent } from 'components/Tooltip'
-import { ReactNode } from 'react'
-import { ChevronRight } from 'react-feather'
 import { Box } from 'rebass'
 import styled from 'styled-components/macro'
 import { TYPE } from 'theme'
@@ -17,59 +13,43 @@ export interface RoutingDiagramEntry {
   path: [Currency, Currency, FeeAmount | undefined][]
 }
 
-const MainRow = styled(Box)`
-  display: grid;
-  grid-template-columns: 60px 1fr 60px;
-  grid-gap: 8px;
-  justify-content: space-between;
-  width: 100%;
+const Wrapper = styled(Box)`
+  align-items: center;
+  background-color: ${({ theme }) => theme.bg0};
+  width: 400px;
 `
 
-const EdgeRow = styled(Box)`
-  align-items: center;
+const RouteContainerRow = styled(Row)`
   display: grid;
   grid-gap: 8px;
-  grid-template-columns: 1fr 1fr;
-  justify-content: space-between;
+  grid-template-columns: 24px 1fr 24px;
 `
 
 const RouteRow = styled(Row)`
-  border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.bg2};
+  align-items: center;
   display: flex;
   justify-content: center;
   padding: 0.1rem 0.5rem;
   position: relative;
-
-  &:hover {
-    border: 1px solid ${({ theme }) => theme.bg4};
-  }
 `
 
 const PoolBadge = styled(Badge)`
-  padding: 0.25rem 0.5rem;
   display: flex;
+  padding: 0.25rem 0.5rem;
 `
 
 const DottedLine = styled.div`
-  border-width: 1px;
   border-color: ${({ theme }) => theme.bg4};
   border-style: dashed;
-  position: absolute;
+  border-width: 1px;
   height: 0px;
-  width: calc(100% - 1.5rem);
+  position: absolute;
+  width: calc(100%);
   z-index: 1;
 `
 
-const StyledChevronRight = styled(ChevronRight).attrs({ size: 20 })`
-  color: ${({ theme }) => theme.bg4};
-  margin: 0 !important; /* overrides AutoRow */
-  stroke-width: 3px;
-  background-color: ${({ theme }) => theme.bg0};
-`
-
 const OpaqueBadge = styled(Badge)`
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.bg2};
   z-index: 2;
 `
 
@@ -83,42 +63,26 @@ export default function RoutingDiagram({
   routes: RoutingDiagramEntry[]
 }) {
   return (
-    <MainRow>
-      <EdgeRow>
-        <CurrencyLogo currency={currencyIn} />
-        <StyledChevronRight />
-      </EdgeRow>
-
-      <Box>
-        {routes.map((route, index) => (
-          <AutoColumn key={index}>
-            <Route currencyIn={currencyIn} currencyOut={currencyOut} {...route} />
-          </AutoColumn>
-        ))}
-      </Box>
-
-      <EdgeRow>
-        <StyledChevronRight />
-        <CurrencyLogo currency={currencyOut} />
-      </EdgeRow>
-    </MainRow>
+    <Wrapper>
+      {routes.map((route, index) => (
+        <RouteContainerRow key={index}>
+          <CurrencyLogo currency={currencyIn} />
+          <Route {...route} />
+          <CurrencyLogo currency={currencyOut} />
+        </RouteContainerRow>
+      ))}
+    </Wrapper>
   )
 }
 
-function Route({
-  percent,
-  path,
-}: {
-  currencyIn: Currency
-  currencyOut: Currency
-  percent: RoutingDiagramEntry['percent']
-  path: RoutingDiagramEntry['path']
-}) {
+function Route({ percent, path }: { percent: RoutingDiagramEntry['percent']; path: RoutingDiagramEntry['path'] }) {
   return (
     <RouteRow>
       <DottedLine />
       <OpaqueBadge>
-        <TYPE.small fontSize={12}>{percent.toSignificant(2)}%</TYPE.small>
+        <TYPE.small fontSize={12} style={{ wordBreak: 'normal' }}>
+          {percent.toSignificant(2)}%
+        </TYPE.small>
       </OpaqueBadge>
 
       <AutoRow gap="1px" width="100%" style={{ justifyContent: 'space-evenly', zIndex: 2 }}>
@@ -130,29 +94,6 @@ function Route({
   )
 }
 
-function MouseOverChevron({
-  currency0,
-  currency1,
-  feeAmount,
-  children,
-}: {
-  currency0: Currency
-  currency1: Currency
-  feeAmount: FeeAmount | undefined
-  children: ReactNode
-}) {
-  const feeAmountLabel = feeAmount ? `${feeAmount / 10000}%` : ''
-  return (
-    <MouseoverTooltipContent
-      width="auto"
-      content={<TYPE.small fontSize={12}>{`${currency0.symbol}/${currency1.symbol} ${feeAmountLabel}`}</TYPE.small>}
-      placement="top"
-    >
-      {children}
-    </MouseoverTooltipContent>
-  )
-}
-
 function Pool({
   currency0,
   currency1,
@@ -163,13 +104,11 @@ function Pool({
   feeAmount: FeeAmount | undefined
 }) {
   return (
-    <MouseOverChevron currency0={currency0} currency1={currency1} feeAmount={feeAmount}>
-      <PoolBadge>
-        <Box margin="0 5px 0 10px">
-          <DoubleCurrencyLogo currency0={currency1} currency1={currency0} size={20} />
-        </Box>
-        {feeAmount && <TYPE.small fontSize={12}>{feeAmount / 10000}%</TYPE.small>}
-      </PoolBadge>
-    </MouseOverChevron>
+    <PoolBadge>
+      <Box margin="0 5px 0 10px">
+        <DoubleCurrencyLogo currency0={currency1} currency1={currency0} size={20} />
+      </Box>
+      {feeAmount && <TYPE.small fontSize={12}>{feeAmount / 10000}%</TYPE.small>}
+    </PoolBadge>
   )
 }