Various bug fixes (#1501)

* fix for error token map parsings

* fix error on formatting sig figs

* fix various bugs

* no hover cursor
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

src/components/HoverInlineText/index.tsx

+import Tooltip from 'components/Tooltip'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+const TextWrapper = styled.div<{ margin: boolean; link: boolean; fontSize?: string; adjustSize?: boolean }>`
+  position: relative;
+  margin-left: ${({ margin }) => margin && '4px'};
+  color: ${({ theme, link }) => (link ? theme.blue1 : theme.text1)};
+  font-size: ${({ fontSize }) => fontSize ?? 'inherit'};
+
+  @media screen and (max-width: 600px) {
+    font-size: ${({ adjustSize }) => adjustSize && '12px'};
+  }
+`
+
+const HoverInlineText = ({
+  text,
+  maxCharacters = 20,
+  margin = false,
+  adjustSize = false,
+  fontSize,
+  link,
+  ...rest
+}: {
+  text: string
+  maxCharacters?: number
+  margin?: boolean
+  adjustSize?: boolean
+  fontSize?: string
+  link?: boolean
+}) => {
+  const [showHover, setShowHover] = useState(false)
+
+  if (!text) {
+    return <span></span>
+  }
+
+  if (text.length > maxCharacters) {
+    return (
+      <Tooltip text={text} show={showHover}>
+        <TextWrapper
+          onMouseEnter={() => setShowHover(true)}
+          onMouseLeave={() => setShowHover(false)}
+          margin={margin}
+          adjustSize={adjustSize}
+          link={!!link}
+          fontSize={fontSize}
+          {...rest}
+        >
+          {' ' + text.slice(0, maxCharacters - 1) + '...'}
+        </TextWrapper>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <TextWrapper margin={margin} adjustSize={adjustSize} link={!!link} fontSize={fontSize} {...rest}>
+      {text}
+    </TextWrapper>
+  )
+}
+
+export default HoverInlineText

src/components/PositionCard/index.tsx

@@ -298,12 +298,21 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
             </ButtonSecondary>
             {userDefaultPoolBalance && JSBI.greaterThan(userDefaultPoolBalance.raw, BIG_INT_ZERO) && (
               <RowBetween marginTop="10px">
+                <ButtonPrimary
+                  padding="8px"
+                  borderRadius="8px"
+                  as={Link}
+                  to={`/migrate/v2/${pair.liquidityToken.address}`}
+                  width="32%"
+                >
+                  Migrate
+                </ButtonPrimary>
                 <ButtonPrimary
                   padding="8px"
                   borderRadius="8px"
                   as={Link}
                   to={`/add/v2/${currencyId(currency0)}/${currencyId(currency1)}`}
-                  width="48%"
+                  width="32%"
                 >
                   Add
                 </ButtonPrimary>
@@ -311,7 +320,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
                   padding="8px"
                   borderRadius="8px"
                   as={Link}
-                  width="48%"
+                  width="32%"
                   to={`/remove/v2/${currencyId(currency0)}/${currencyId(currency1)}`}
                 >
                   Remove

src/pages/AddLiquidity/index.tsx

@@ -14,7 +14,7 @@ import { YellowCard, OutlineCard, BlueCard, LightCard } from '../../components/C
 import { AutoColumn } from '../../components/Column'
 import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import { RowBetween } from '../../components/Row'
+import { RowBetween, RowFixed } from '../../components/Row'
 import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import { useUSDCValue } from '../../hooks/useUSDCPrice'
 import Review from './Review'
@@ -52,6 +52,7 @@ import RateToggle from 'components/RateToggle'
 import { BigNumber } from '@ethersproject/bignumber'
 import { calculateGasMargin } from 'utils'
 import { AddRemoveTabs } from 'components/NavigationTabs'
+import HoverInlineText from 'components/HoverInlineText'
 
 const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
@@ -498,8 +499,13 @@ export default function AddLiquidity({
                         <TYPE.main>
                           {price ? (
                             <TYPE.main>
-                              {invertPrice ? price?.invert()?.toSignificant(5) : price?.toSignificant(5)}{' '}
-                              {quoteCurrency?.symbol}
+                              <RowFixed>
+                                <HoverInlineText
+                                  maxCharacters={20}
+                                  text={invertPrice ? price?.invert()?.toSignificant(5) : price?.toSignificant(5)}
+                                />{' '}
+                                <span style={{ marginLeft: '4px' }}>{quoteCurrency?.symbol}</span>
+                              </RowFixed>
                             </TYPE.main>
                           ) : (
                             '-'
@@ -580,7 +586,10 @@ export default function AddLiquidity({
                           Current Price
                         </TYPE.main>
                         <TYPE.body fontWeight={500} textAlign="center" fontSize={20}>
-                          {invertPrice ? price.invert().toSignificant(5) : price.toSignificant(5)}{' '}
+                          <HoverInlineText
+                            maxCharacters={20}
+                            text={invertPrice ? price.invert().toSignificant(5) : price.toSignificant(5)}
+                          />{' '}
                         </TYPE.body>
                         <TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
                           {quoteCurrency?.symbol} {' per '}

src/pages/Pool/CTACards.tsx

@@ -28,6 +28,7 @@ const CTA1 = styled(ExternalLink)`
   border-radius: 20px;
   display: flex;
   flex-direction: column;
+  position: relative;
   justify-content: space-between;
   border: 1px solid ${({ theme }) => theme.bg3};
 
@@ -99,8 +100,8 @@ const HeaderText = styled(TYPE.label)`
 `
 
 const ResponsiveColumn = styled(AutoColumn)`
+  grid-template-columns: 1fr;
   gap: 12px;
-  height: 100%;
   ${({ theme }) => theme.mediaWidth.upToMedium`
     gap: 8px;
   `};
@@ -134,12 +135,10 @@ export default function CTACards() {
       </CTA1>
       <CTA2 href={'https://info.uniswap.org/#/pools'}>
         <ResponsiveColumn>
-          <AutoColumn gap="0px">
-            <HeaderText style={{ alignSelf: 'flex-start' }}>{t('Top pools')}</HeaderText>
-            <TYPE.body fontWeight={300} style={{ alignSelf: 'flex-start' }}>
-              {t('Explore popular pools on Uniswap Analytics.')}
-            </TYPE.body>
-          </AutoColumn>
+          <HeaderText style={{ alignSelf: 'flex-start' }}>{t('Top pools')}</HeaderText>
+          <TYPE.body fontWeight={300} style={{ alignSelf: 'flex-start' }}>
+            {t('Explore popular pools on Uniswap Analytics.')}
+          </TYPE.body>
           <HeaderText style={{ alignSelf: 'flex-end' }}>{t('↗')}</HeaderText>
         </ResponsiveColumn>
       </CTA2>

src/pages/Pool/PositionPage.tsx

@@ -16,7 +16,7 @@ import { ExternalLink, HideExtraSmall, TYPE } from 'theme'
 import Badge from 'components/Badge'
 import { calculateGasMargin, getEtherscanLink } from 'utils'
 import { ButtonConfirmed, ButtonPrimary, ButtonGray } from 'components/Button'
-import { DarkCard, DarkGreyCard, LightCard } from 'components/Card'
+import { DarkCard, LightCard } from 'components/Card'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { useTranslation } from 'react-i18next'
 import { currencyId } from 'utils/currencyId'
@@ -498,11 +498,9 @@ export function PositionPage({
                           {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
                         </TYPE.main>
                         {typeof ratio === 'number' && !removed ? (
-                          <DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
-                            <TYPE.main color={theme.text2} fontSize={11}>
-                              {inverted ? ratio : 100 - ratio}%
-                            </TYPE.main>
-                          </DarkGreyCard>
+                          <Badge style={{ marginLeft: '10px' }}>
+                            <TYPE.main fontSize={11}>{inverted ? ratio : 100 - ratio}%</TYPE.main>
+                          </Badge>
                         ) : null}
                       </RowFixed>
                     </RowBetween>
@@ -516,11 +514,11 @@ export function PositionPage({
                           {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
                         </TYPE.main>
                         {typeof ratio === 'number' && !removed ? (
-                          <DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
+                          <Badge style={{ marginLeft: '10px' }}>
                             <TYPE.main color={theme.text2} fontSize={11}>
                               {inverted ? 100 - ratio : ratio}%
                             </TYPE.main>
-                          </DarkGreyCard>
+                          </Badge>
                         ) : null}
                       </RowFixed>
                     </RowBetween>

src/state/mint/v3/hooks.ts

@@ -10,6 +10,7 @@ import {
   TickMath,
   tickToPrice,
   TICK_SPACINGS,
+  encodeSqrtRatioX96,
 } from '@uniswap/v3-sdk/dist/'
 import { Currency, CurrencyAmount, ETHER, Price, Rounding } from '@uniswap/sdk-core'
 import { useCallback, useMemo } from 'react'
@@ -185,16 +186,29 @@ export function useV3DerivedMintInfo(
     }
   }, [noLiquidity, startPriceTypedValue, invertPrice, token1, token0, pool])
 
+  // check for invalid price input (converts to invalid ratio)
+  const invalidPrice = useMemo(() => {
+    const sqrtRatioX96 = price ? encodeSqrtRatioX96(price.raw.numerator, price.raw.denominator) : undefined
+    const invalid =
+      price &&
+      sqrtRatioX96 &&
+      !(
+        JSBI.greaterThanOrEqual(sqrtRatioX96, TickMath.MIN_SQRT_RATIO) &&
+        JSBI.lessThan(sqrtRatioX96, TickMath.MAX_SQRT_RATIO)
+      )
+    return invalid
+  }, [price])
+
   // used for ratio calculation when pool not initialized
   const mockPool = useMemo(() => {
-    if (tokenA && tokenB && feeAmount && price) {
+    if (tokenA && tokenB && feeAmount && price && !invalidPrice) {
       const currentTick = priceToClosestTick(price)
       const currentSqrt = TickMath.getSqrtRatioAtTick(currentTick)
       return new Pool(tokenA, tokenB, feeAmount, currentSqrt, JSBI.BigInt(0), currentTick, [])
     } else {
       return undefined
     }
-  }, [feeAmount, price, tokenA, tokenB])
+  }, [feeAmount, invalidPrice, price, tokenA, tokenB])
 
   // if pool exists use it, if not use the mock pool
   const poolForPosition: Pool | undefined = pool ?? mockPool
@@ -374,6 +388,10 @@ export function useV3DerivedMintInfo(
     errorMessage = errorMessage ?? 'Invalid pair'
   }
 
+  if (invalidPrice) {
+    errorMessage = errorMessage ?? 'Invalid price input'
+  }
+
   if (
     (!parsedAmounts[Field.CURRENCY_A] && !depositADisabled) ||
     (!parsedAmounts[Field.CURRENCY_B] && !depositBDisabled)