Swap interface tweaks (#159)

* fix some nits in the swap interface

* remove some unused css

* tweak the info icon a bit

src/components/Row/index.tsx

@@ -43,12 +43,4 @@ export const RowFixed = styled(Row)<{ gap?: string; justify?: string }>`
   margin: ${({ gap }) => gap && `-${gap}`};
 `
 
-export const RowResponsive = styled(Row)`
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-      flex-direction: column;
-      justify-content: flext-start;
-      align-items: flex-start;
-  `}
-`
-
 export default Row

src/components/Tooltip/index.tsx

@@ -44,7 +44,11 @@ export function MouseoverTooltipContent({ content, children, ...rest }: Omit<Too
   const close = useCallback(() => setShow(false), [setShow])
   return (
     <TooltipContent {...rest} show={show} content={content}>
-      <div onMouseEnter={open} onMouseLeave={close}>
+      <div
+        style={{ display: 'inline-block', lineHeight: 0, padding: '0.25rem' }}
+        onMouseEnter={open}
+        onMouseLeave={close}
+      >
         {children}
       </div>
     </TooltipContent>

src/components/swap/BetterTradeLink.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router'
 import { Link } from 'react-router-dom'
 
 import useParsedQueryString from '../../hooks/useParsedQueryString'
-import useToggledVersion, { DEFAULT_VERSION, Version } from '../../hooks/useToggledVersion'
+import { DEFAULT_VERSION, Version } from '../../hooks/useToggledVersion'
 import { HideSmall, TYPE, SmallOnly } from '../../theme'
 import { ButtonPrimary } from '../Button'
 import styled from 'styled-components'
@@ -17,7 +17,7 @@ const ResponsiveButton = styled(ButtonPrimary)`
   height: 24px;
   margin-left: 0.75rem;
   ${({ theme }) => theme.mediaWidth.upToSmall`
-     padding: 4px;
+    padding: 4px;
     border-radius: 8px;
   `};
 `
@@ -62,29 +62,3 @@ export default function BetterTradeLink({
     </ResponsiveButton>
   )
 }
-
-export function DefaultVersionLink() {
-  const location = useLocation()
-  const search = useParsedQueryString()
-  const version = useToggledVersion()
-
-  const linkDestination = useMemo(() => {
-    return {
-      ...location,
-      search: `?${stringify({
-        ...search,
-        use: DEFAULT_VERSION,
-      })}`,
-    }
-  }, [location, search])
-
-  return (
-    <ButtonPrimary
-      as={Link}
-      to={linkDestination}
-      style={{ width: 'fit-content', marginTop: '4px', padding: '0.5rem 0.5rem' }}
-    >
-      Showing {version.toUpperCase()} price. <b>Switch to Uniswap {DEFAULT_VERSION.toUpperCase()} ↗</b>
-    </ButtonPrimary>
-  )
-}

src/components/swap/TradePrice.tsx

@@ -12,23 +12,16 @@ interface TradePriceProps {
 }
 
 const StyledPriceContainer = styled.button`
+  display: flex;
   justify-content: center;
   align-items: center;
-  display: flex;
-  width: fit-content;
   padding: 0;
   font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
   border: none;
-  margin-left: 1rem;
   height: 24px;
   cursor: pointer;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    margin-left: 0;
-    margin-top: 8px;
-  `}
 `
 
 export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {
@@ -45,11 +38,13 @@ export default function TradePrice({ price, showInverted, setShowInverted }: Tra
   const labelInverted = showInverted ? `${price.baseCurrency?.symbol} ` : `${price.quoteCurrency?.symbol}`
   const flipPrice = useCallback(() => setShowInverted(!showInverted), [setShowInverted, showInverted])
 
+  const text = `${'1 ' + labelInverted + ' = ' + formattedPrice ?? '-'} ${label}`
+
   return (
-    <StyledPriceContainer onClick={flipPrice}>
+    <StyledPriceContainer onClick={flipPrice} title={text}>
       <div style={{ alignItems: 'center', display: 'flex', width: 'fit-content' }}>
         <Text fontWeight={500} fontSize={14} color={theme.text1}>
-          {'1 ' + labelInverted + ' = ' + formattedPrice ?? '-'} {label}
+          {text}
         </Text>
       </div>
     </StyledPriceContainer>

src/hooks/useERC20Permit.ts

@@ -27,7 +27,7 @@ interface PermitInfo {
   version?: string
 }
 
-// todo: read this information from extensions on token lists
+// todo: read this information from extensions on token lists or elsewhere (permit registry?)
 const PERMITTABLE_TOKENS: {
   [chainId in ChainId]: {
     [checksummedTokenAddress: string]: PermitInfo

src/pages/Swap/index.tsx

@@ -10,7 +10,7 @@ import { ArrowDown, CheckCircle, HelpCircle, Info, ArrowLeft } from 'react-feath
 import ReactGA from 'react-ga'
 import { Link, RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 import AddressInputPanel from '../../components/AddressInputPanel'
 import { ButtonConfirmed, ButtonError, ButtonGray, ButtonLight, ButtonPrimary } from '../../components/Button'
 import { GreyCard } from '../../components/Card'
@@ -18,7 +18,7 @@ import { AutoColumn } from '../../components/Column'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import CurrencyLogo from '../../components/CurrencyLogo'
 import Loader from '../../components/Loader'
-import { AutoRow, RowResponsive, RowFixed } from '../../components/Row'
+import Row, { AutoRow, RowFixed } from '../../components/Row'
 import BetterTradeLink from '../../components/swap/BetterTradeLink'
 import confirmPriceImpactWithoutFee from '../../components/swap/confirmPriceImpactWithoutFee'
 import ConfirmSwapModal from '../../components/swap/ConfirmSwapModal'
@@ -47,14 +47,25 @@ import {
   useSwapState,
 } from '../../state/swap/hooks'
 import { useExpertModeManager, useUserSingleHopOnly, useUserSlippageTolerance } from '../../state/user/hooks'
-import { LinkStyledButton, TYPE } from '../../theme'
+import { HideSmall, LinkStyledButton, TYPE } from '../../theme'
 import { computeFiatValuePriceImpact } from '../../utils/computeFiatValuePriceImpact'
+import { computePriceImpactWithMaximumSlippage } from '../../utils/computePriceImpactWithMaximumSlippage'
 import { getTradeVersion } from '../../utils/getTradeVersion'
 import { isTradeBetter } from '../../utils/isTradeBetter'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
 
+const StyledInfo = styled(Info)`
+  opacity: 0.4;
+  color: ${({ theme }) => theme.text1};
+  height: 16px;
+  width: 16px;
+  :hover {
+    opacity: 0.8;
+  }
+`
+
 export default function Swap({ history }: RouteComponentProps) {
   const loadedUrlParams = useDefaultsFromURLSearch()
 
@@ -274,8 +285,17 @@ export default function Swap({ history }: RouteComponentProps) {
   // errors
   const [showInverted, setShowInverted] = useState<boolean>(false)
 
-  // warnings on price impact
-  const priceImpactSeverity = warningSeverity(priceImpact)
+  // warnings on the greater of fiat value price impact and execution price impact
+  const priceImpactSeverity = useMemo(() => {
+    const executionPriceImpact = trade ? computePriceImpactWithMaximumSlippage(trade, allowedSlippage) : undefined
+    return warningSeverity(
+      executionPriceImpact && priceImpact
+        ? executionPriceImpact.greaterThan(priceImpact)
+          ? executionPriceImpact
+          : priceImpact
+        : executionPriceImpact ?? priceImpact
+    )
+  }, [allowedSlippage, priceImpact, trade])
 
   // show approve flow when: no error on inputs, not approved or pending, or approved in current session
   // never show if price impact is above threshold in non expert mode
@@ -398,7 +418,7 @@ export default function Swap({ history }: RouteComponentProps) {
               </>
             ) : null}
 
-            <RowResponsive style={{ justifyContent: !trade ? 'center' : 'space-between' }}>
+            <Row style={{ justifyContent: !trade ? 'center' : 'space-between' }}>
               <RowFixed>
                 {[V3TradeState.VALID, V3TradeState.SYNCING, V3TradeState.NO_ROUTE_FOUND].includes(v3TradeState) &&
                   (toggledVersion === Version.v3 && isTradeBetter(v3Trade, v2Trade) ? (
@@ -424,7 +444,7 @@ export default function Swap({ history }: RouteComponentProps) {
                       >
                         <ArrowLeft color={theme.text3} size={12} /> &nbsp;
                         <TYPE.main style={{ lineHeight: '120%' }} fontSize={12}>
-                          Back to V3
+                          <HideSmall>Back to </HideSmall>V3
                         </TYPE.main>
                       </ButtonGray>
                     )
@@ -447,33 +467,19 @@ export default function Swap({ history }: RouteComponentProps) {
                   </ButtonGray>
                 )}
               </RowFixed>
-              <RowFixed>
-                {trade ? (
+              {trade ? (
+                <RowFixed>
                   <TradePrice
                     price={trade.worstExecutionPrice(allowedSlippage)}
                     showInverted={showInverted}
                     setShowInverted={setShowInverted}
                   />
-                ) : (
-                  <TYPE.main></TYPE.main>
-                )}
-                {trade && (
                   <MouseoverTooltipContent content={<AdvancedSwapDetails trade={trade} />}>
-                    <Info
-                      size={16}
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        height: '24px',
-                        opacity: 0.4,
-                        margin: '0 .75rem 0 .5rem',
-                      }}
-                      color={theme.text1}
-                    />
+                    <StyledInfo />
                   </MouseoverTooltipContent>
-                )}
-              </RowFixed>
-            </RowResponsive>
+                </RowFixed>
+              ) : null}
+            </Row>
 
             <BottomGrouping>
               {swapIsUnsupported ? (