Position styles (#55)

* Better position list layout WIP * Position list updates * add badge data and current price hover * merge cleanup * fix missing library * position page improvements * Clean up position page and overview * layout and color updates * Clean up page * Clean up position page * clean up errors * Add icons * Merge main * Position styles tweaks Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>
2021-05-03 11:50:54 -04:00 · 2021-05-03 11:50:54 -04:00 · 1619386ab4
commit 1619386ab4
parent 93d33947da
12 changed files with 566 additions and 361 deletions
--- a/public/locales/en.json
+++ b/public/locales/en.json
@ -89,7 +89,7 @@
  "toleranceExplanation": "Lowering this limit decreases your risk of frontrunning. However, this makes more likely that your transaction will fail due to normal price movements.",
  "tokenSearchPlaceholder": "Search name or paste address",
  "selectFee": "Select Fee",
-  "selectLiquidityRange": "Select Liquidity Range",
+  "selectLiquidityRange": "Select Price Range",
  "selectPool": "Select Fee Tier",
  "depositAmounts": "Deposit Amounts",
  "fee": "fee",
--- a/src/components/Badge/RangeBadge.tsx
+++ b/src/components/Badge/RangeBadge.tsx
@ -0,0 +1,63 @@
+import React from 'react'
+
+import Badge, { BadgeVariant } from 'components/Badge'
+import styled from 'styled-components'
+
+import { MouseoverTooltip } from '../../components/Tooltip'
+import { useTranslation } from 'react-i18next'
+import { AlertCircle } from 'react-feather'
+
+const BadgeWrapper = styled.div`
+  font-size: 14px;
+  display: flex;
+  justify-content: flex-end;
+`
+
+const BadgeText = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+`
+
+const ActiveDot = styled.span`
+  background-color: ${({ theme }) => theme.success};
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+  margin-right: 4px;
+`
+
+export const DarkBadge = styled.div`
+  width: fit-content;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.bg0};
+  padding: 4px 6px;
+`
+
+export default function RangeBadge({ inRange }: { inRange?: boolean }) {
+  const { t } = useTranslation()
+
+  return (
+    <BadgeWrapper>
+      {inRange ? (
+        <MouseoverTooltip
+          text={`The price of this pair is within your selected range. Your positions is earning fees.`}
+        >
+          <Badge variant={BadgeVariant.DEFAULT}>
+            <ActiveDot /> &nbsp;
+            <BadgeText>{t('In range')}</BadgeText>
+          </Badge>
+        </MouseoverTooltip>
+      ) : (
+        <MouseoverTooltip
+          text={`The price of this pair is outside of your selected range. Your positions is not earning fees.`}
+        >
+          <Badge variant={BadgeVariant.WARNING}>
+            <AlertCircle width={14} height={14} />
+            &nbsp;
+            <BadgeText>{t('Out of range')}</BadgeText>
+          </Badge>
+        </MouseoverTooltip>
+      )}
+    </BadgeWrapper>
+  )
+}
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@ -37,6 +37,10 @@ const Base = styled(RebassButton)<{
  > * {
    user-select: none;
  }
+
+  > a {
+    text-decoration: none;
+  }
 `

 export const ButtonPrimary = styled(Base)`
--- a/src/components/PositionList/index.tsx
+++ b/src/components/PositionList/index.tsx
@ -9,19 +9,17 @@ const DesktopHeader = styled.div`
  display: none;
  font-size: 14px;
  font-weight: 500;
-  opacity: 0.6;
-  padding: 8px 8px 0 8px;
+  padding: 8px 8px 8px 8px;

  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
    align-items: center;
    display: flex;
-    margin: 0 0 8px 0;
-    & > div:first-child {
-      flex: 1 1 auto;
-    }
-    & > div:not(:first-child) {
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    & > div:last-child {
      text-align: right;
-      min-width: 18%;
+      margin-right: 12px;
    }
  }
 `
@ -45,10 +43,11 @@ export default function PositionList({ positions }: PositionListProps) {
  return (
    <>
      <DesktopHeader>
-        <div>{t('Position')}</div>
-        <div>{t('Range')}</div>
-        <div>{t('Liquidity')}</div>
-        <div>{t('Fees Earned')}</div>
+        <div>
+          {t('Your positions')}
+          {positions && ' (' + positions.length + ')'}
+        </div>
+        <div>{t('Price range')}</div>
      </DesktopHeader>
      <MobileHeader>Your positions</MobileHeader>
      {positions.map((p) => {
--- a/src/components/PositionListItem/index.tsx
+++ b/src/components/PositionListItem/index.tsx
@ -1,21 +1,22 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Position } from '@uniswap/v3-sdk'
 import Badge, { BadgeVariant } from 'components/Badge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { usePool } from 'hooks/usePools'
 import { useToken } from 'hooks/Tokens'
-import { AlertTriangle } from 'react-feather'
+import { AlertCircle } from 'react-feather'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { MEDIA_WIDTHS } from 'theme'
 import { PositionDetails } from 'types/position'
-import { TokenAmount, WETH9, Price, Token, Percent } from '@uniswap/sdk-core'
-import { formatPrice, formatTokenAmount } from 'utils/formatTokenAmount'
+import { WETH9, Price, Token, Percent } from '@uniswap/sdk-core'
+import { formatPrice } from 'utils/formatTokenAmount'
 import Loader from 'components/Loader'
 import { unwrappedToken } from 'utils/wrappedCurrency'
-import { useV3PositionFees } from 'hooks/useV3PositionFees'
 import { DAI, USDC, USDT, WBTC } from '../../constants'
+import { MouseoverTooltip } from '../Tooltip'
+import { RowFixed } from 'components/Row'

 const ActiveDot = styled.span`
  background-color: ${({ theme }) => theme.success};
@ -28,29 +29,29 @@ const Row = styled(Link)`
  align-items: center;
  border-radius: 20px;
  display: flex;
-  flex-direction: column;
+  justify-content: space-between;
  color: ${({ theme }) => theme.text1};
  margin: 8px 0;
-  padding: 8px;
+  padding: 16px;
  text-decoration: none;
  font-weight: 500;
+  background-color: ${({ theme }) => theme.bg1};
+
  &:first-of-type {
    margin: 0 0 8px 0;
  }
  &:last-of-type {
    margin: 8px 0 0 0;
  }
-
  & > div:not(:first-child) {
    text-align: right;
-    min-width: 18%;
+  }
+  :hover {
+    background-color: ${({ theme }) => theme.bg2};
  }
  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
    flex-direction: row;
  }
-  :hover {
-    background-color: ${({ theme }) => theme.bg1};
-  }
 `
 const BadgeText = styled.div`
  font-weight: 500;
@ -60,63 +61,44 @@ const BadgeWrapper = styled.div`
  font-size: 14px;
 `
 const DataLineItem = styled.div`
-  text-align: right;
  font-size: 14px;
 `
+
+const RangeLineItem = styled(DataLineItem)`
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  justify-self: flex-end;
+`
+
 const DoubleArrow = styled.span`
  color: ${({ theme }) => theme.text3};
 `
-const RangeData = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  & > div {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-    & > div {
-      display: block;
-    }
-  }
+
+const RangeText = styled.span`
+  background-color: ${({ theme }) => theme.bg2};
+  padding: 0.25rem 0.5rem;
+  border-radius: 8px;
 `
-const AmountData = styled.div`
-  display: none;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-  }
-`
-const FeeData = styled.div`
-  display: none;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-  }
-`
-const LabelData = styled.div`
-  align-items: center;
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: space-between;
-  width: 100%;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-  }
+
+const ExtentsText = styled.span`
+  color: ${({ theme }) => theme.text3};
+  font-size: 14px;
+  margin-right: 4px;
 `
+
 const PrimaryPositionIdData = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
-  padding: 6px 0 12px 0;
  > * {
    margin-right: 8px;
  }
 `

 const DataText = styled.div`
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 18px;
 `

 export interface PositionListItemProps {
@ -207,31 +189,33 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
    return undefined
  }, [liquidity, pool, tickLower, tickUpper])

-  // liquidity amounts in tokens
-  const amount0: TokenAmount | undefined = position?.amount0
-  const amount1: TokenAmount | undefined = position?.amount1
-  const formattedAmount0 = formatTokenAmount(amount0, 4)
-  const formattedAmount1 = formatTokenAmount(amount1, 4)
-
  // prices
-  const { priceLower, priceUpper, base } = getPriceOrderingFromPositionForUI(position)
+  let { priceLower, priceUpper, base, quote } = getPriceOrderingFromPositionForUI(position)
  const inverted = token1 ? base?.equals(token1) : undefined
  const currencyQuote = inverted ? currency0 : currency1
  const currencyBase = inverted ? currency1 : currency0

-  // fees
-  const [feeValue0, feeValue1] = useV3PositionFees(pool ?? undefined, positionDetails)
-
  // check if price is within range
  const outOfRange: boolean = pool ? pool.tickCurrent < tickLower || pool.tickCurrent >= tickUpper : false

  const positionSummaryLink = '/pool/' + positionDetails.tokenId

+  const [manuallyInverted, setManuallyInverted] = useState(true)
+  if (manuallyInverted) {
+    ;[priceLower, priceUpper, base, quote] = [priceUpper?.invert(), priceLower?.invert(), quote, base]
+  }
+
+  const quotePrice = useMemo(() => {
+    return manuallyInverted
+      ? position?.pool.priceOf(position?.pool.token0)
+      : position?.pool.priceOf(position?.pool.token1)
+  }, [manuallyInverted, position?.pool])
+
  return (
    <Row to={positionSummaryLink}>
-      <LabelData>
+      <RowFixed>
        <PrimaryPositionIdData>
-          <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={16} margin />
+          <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={18} margin />
          <DataText>
            &nbsp;{currencyQuote?.symbol}&nbsp;/&nbsp;{currencyBase?.symbol}
          </DataText>
@ -242,61 +226,63 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
        </PrimaryPositionIdData>
        <BadgeWrapper>
          {outOfRange ? (
-            <Badge variant={BadgeVariant.WARNING}>
-              <AlertTriangle width={14} height={14} style={{ marginRight: '4px' }} />
-              &nbsp;
-              <BadgeText>{t('Out of range')}</BadgeText>
-            </Badge>
+            <MouseoverTooltip
+              text={`The price of this pair is outside of your selected range. Your positions is not earning fees. Current price: ${quotePrice?.toSignificant(
+                6
+              )} ${manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} / ${
+                manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol
+              }`}
+            >
+              <Badge variant={BadgeVariant.WARNING}>
+                <AlertCircle width={14} height={14} style={{ marginRight: '' }} />
+                &nbsp;
+                <BadgeText>{t('Out of range')}</BadgeText>
+              </Badge>
+            </MouseoverTooltip>
          ) : (
-            <Badge variant={BadgeVariant.DEFAULT}>
-              <ActiveDot /> &nbsp;
-              <BadgeText>{t('Active')}</BadgeText>
-            </Badge>
+            <MouseoverTooltip
+              text={`The price of this pair is within your selected range. Your positions is earning fees. Current price: ${quotePrice?.toSignificant(
+                6
+              )} ${manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} / ${
+                manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol
+              }`}
+            >
+              <Badge variant={BadgeVariant.DEFAULT}>
+                <ActiveDot /> &nbsp;
+                <BadgeText>{t('In range')}</BadgeText>
+              </Badge>
+            </MouseoverTooltip>
          )}
        </BadgeWrapper>
-      </LabelData>
-      <RangeData>
-        {priceLower && priceUpper ? (
-          <>
-            <DataLineItem>
-              {formatPrice(priceLower, 4)} <DoubleArrow>↔</DoubleArrow> {formatPrice(priceUpper, 4)}{' '}
-              {currencyQuote?.symbol}
-              &nbsp;/&nbsp;
-              {currencyBase?.symbol}
-            </DataLineItem>
-          </>
-        ) : (
-          <Loader />
-        )}
-      </RangeData>
-      <AmountData>
-        {formattedAmount0 && formattedAmount1 ? (
-          <>
-            <DataLineItem>
-              {inverted ? formattedAmount0 : formattedAmount1}&nbsp;{currencyQuote?.symbol}
-            </DataLineItem>
-            <DataLineItem>
-              {inverted ? formattedAmount1 : formattedAmount0}&nbsp;{currencyBase?.symbol}
-            </DataLineItem>
-          </>
-        ) : (
-          <Loader />
-        )}
-      </AmountData>
-      <FeeData>
-        {feeValue0 && feeValue1 ? (
-          <>
-            <DataLineItem>
-              {formatTokenAmount(inverted ? feeValue0 : feeValue1, 4)}&nbsp;{currencyQuote?.symbol}
-            </DataLineItem>
-            <DataLineItem>
-              {formatTokenAmount(inverted ? feeValue1 : feeValue0, 4)}&nbsp;{currencyBase?.symbol}
-            </DataLineItem>
-          </>
-        ) : (
-          <Loader />
-        )}
-      </FeeData>
+      </RowFixed>
+
+      {priceLower && priceUpper ? (
+        <>
+          {' '}
+          <RangeLineItem
+            onClick={(e) => {
+              e.stopPropagation()
+              setManuallyInverted(!manuallyInverted)
+            }}
+          >
+            <span>
+              <RangeText>
+                <ExtentsText>Min: </ExtentsText>
+                {formatPrice(priceLower, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '}
+                {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
+              </RangeText>{' '}
+              <DoubleArrow>⟷</DoubleArrow>{' '}
+              <RangeText>
+                <ExtentsText>Max:</ExtentsText>
+                {formatPrice(priceUpper, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '}
+                {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
+              </RangeText>{' '}
+            </span>
+          </RangeLineItem>
+        </>
+      ) : (
+        <Loader />
+      )}
    </Row>
  )
 }
--- a/src/components/RateToggle/index.tsx
+++ b/src/components/RateToggle/index.tsx
@ -3,6 +3,15 @@ import { Currency } from '@uniswap/sdk-core'
 import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'
 import { useActiveWeb3React } from 'hooks'
 import { wrappedCurrency } from 'utils/wrappedCurrency'
+import Switch from '../../assets/svg/switch.svg'
+import { useDarkModeManager } from '../../state/user/hooks'
+import styled from 'styled-components'
+
+const StyledSwitchIcon = styled.img<{ darkMode: boolean }>`
+  margin: 0 4px;
+  opacity: 0.4;
+  filter: ${({ darkMode }) => (darkMode ? 'invert(0)' : 'invert(1)')};
+`

 // the order of displayed base currencies from left to right is always in sort order
 // currencyA is treated as the preferred base currency
@ -22,14 +31,21 @@ export default function RateToggle({

  const isSorted = tokenA && tokenB && tokenA.sortsBefore(tokenB)

+  const [darkMode] = useDarkModeManager()
+
  return tokenA && tokenB ? (
-    <ToggleWrapper width="fit-content">
-      <ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}>
-        {isSorted ? currencyA.symbol : currencyB.symbol}
-      </ToggleElement>
-      <ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}>
-        {isSorted ? currencyB.symbol : currencyA.symbol}
-      </ToggleElement>
-    </ToggleWrapper>
+    <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>
+      <ToggleWrapper width="fit-content">
+        <ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}>
+          {isSorted ? currencyA.symbol : currencyB.symbol} {' price'}
+        </ToggleElement>
+        <StyledSwitchIcon onClick={handleRateToggle} width={'16px'} src={Switch} alt="logo" darkMode={darkMode} />
+
+        <ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}>
+          {isSorted ? currencyB.symbol : currencyA.symbol}
+          {' price'}
+        </ToggleElement>
+      </ToggleWrapper>
+    </div>
  ) : null
 }
--- a/src/components/Toggle/MultiToggle.tsx
+++ b/src/components/Toggle/MultiToggle.tsx
@ -4,11 +4,11 @@ import styled from 'styled-components'
 export const ToggleWrapper = styled.button<{ width?: string }>`
  display: flex;
  align-items: center;
-  width: ${({ width }) => width ?? '100%'}
-  padding: 1px;
-  background: ${({ theme }) => theme.bg0};
+  width: ${({ width }) => width ?? '100%'};
+  padding: 2px;
+  background: ${({ theme }) => theme.bg1};
  border-radius: 8px;
-  border: ${({ theme }) => '2px solid ' + theme.bg2};
+  border: ${({ theme }) => '1px solid ' + theme.bg1};
  cursor: pointer;
  outline: none;
 `
@ -21,7 +21,7 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string
  border-radius: 6px;
  justify-content: center;
  height: 100%;
-  background: ${({ theme, isActive }) => (isActive ? theme.bg2 : 'none')};
+  background: ${({ theme, isActive }) => (isActive ? theme.bg0 : 'none')};
  color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
  font-size: ${({ fontSize }) => fontSize ?? '1rem'};
  font-weight: 500;
@ -32,6 +32,15 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string
  }
 `

+export const ToggleText = styled.div`
+  color: ${({ theme }) => theme.text3};
+  font-size: 12px;
+  margin-right: 0.5rem;
+  width: 100%;
+  white-space: nowrap;
+  padding: 0 0 0 4px;
+`
+
 export interface ToggleProps {
  options: string[]
  activeIndex: number
--- a/src/pages/Pool/CTACards.tsx
+++ b/src/pages/Pool/CTACards.tsx
@ -0,0 +1,73 @@
+import React from 'react'
+import styled from 'styled-components'
+import { TYPE } from 'theme'
+import { useTranslation } from 'react-i18next'
+import { ExternalLink } from '../../theme'
+
+const CTASection = styled.section`
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 8px;
+`
+
+const CTA1 = styled(ExternalLink)`
+  background-color: ${({ theme }) => theme.bg1};
+  padding: 32px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 220px;
+  border: 1px solid ${({ theme }) => theme.bg4};
+
+  * {
+    color: ${({ theme }) => theme.text1};
+    text-decoration: none !important;
+  }
+
+  :hover {
+    border: 1px solid ${({ theme }) => theme.bg5};
+    background-color: ${({ theme }) => theme.bg2};
+    text-decoration: none;
+    * {
+      text-decoration: none !important;
+    }
+  }
+`
+
+export default function CTACards() {
+  const { t } = useTranslation()
+
+  return (
+    <CTASection>
+      <CTA1 href={''}>
+        <span>
+          <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex', marginBottom: '24px' }}>
+            {t('What’s new in V3 Liquidity Pools?')}
+          </TYPE.largeHeader>
+          <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex' }}>
+            {t(
+              'Learn all about concentrated liquidity and get informed about how to choose ranges that make sense for you.'
+            )}
+          </TYPE.body>
+        </span>
+        <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
+          {t('↗')}
+        </TYPE.largeHeader>
+      </CTA1>
+      <CTA1 href={''}>
+        <span>
+          <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex', marginBottom: '24px' }}>
+            {t('Top pools')}
+          </TYPE.largeHeader>
+          <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex' }}>
+            {t('Explore the top pools with Uniswap Analytics.')}
+          </TYPE.body>
+        </span>
+        <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
+          {t('↗')}
+        </TYPE.largeHeader>
+      </CTA1>
+    </CTASection>
+  )
+}
--- a/src/pages/Pool/PositionPage.tsx
+++ b/src/pages/Pool/PositionPage.tsx
@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { NonfungiblePositionManager, Pool, Position } from '@uniswap/v3-sdk'
+
 import { PoolState, usePool } from 'hooks/usePools'
 import { useToken } from 'hooks/Tokens'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
@ -9,15 +10,14 @@ import { usePositionTokenURI } from '../../hooks/usePositionTokenURI'
 import { LoadingRows } from './styleds'
 import styled from 'styled-components'
 import { AutoColumn } from 'components/Column'
-import Row, { RowBetween, RowFixed } from 'components/Row'
+import { RowBetween, RowFixed } from 'components/Row'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
-import { ButtonText, TYPE } from 'theme'
-import Badge, { BadgeVariant } from 'components/Badge'
+import { TYPE } from 'theme'
+import Badge from 'components/Badge'
 import { calculateGasMargin } from 'utils'
-import { ButtonConfirmed, ButtonPrimary } from 'components/Button'
-import { DarkCard, DarkGreyCard } from 'components/Card'
+import { ButtonConfirmed, ButtonPrimary, ButtonGray } from 'components/Button'
+import { DarkCard, LightCard } from 'components/Card'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { AlertTriangle, ToggleLeft, ToggleRight } from 'react-feather'
 import { useTranslation } from 'react-i18next'
 import { currencyId } from 'utils/currencyId'
 import { formatTokenAmount } from 'utils/formatTokenAmount'
@ -31,44 +31,24 @@ import ReactGA from 'react-ga'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Dots } from 'components/swap/styleds'
 import { getPriceOrderingFromPositionForUI } from '../../components/PositionListItem'
+
+import useTheme from '../../hooks/useTheme'
+import { MinusCircle, PlusCircle } from 'react-feather'
+
+import RateToggle from '../../components/RateToggle'
 import { useSingleCallResult } from 'state/multicall/hooks'

+import RangeBadge from '../../components/Badge/RangeBadge'
+
 const PageWrapper = styled.div`
  min-width: 800px;
-`
-
-const BadgeWrapper = styled.div`
-  font-size: 14px;
+  max-width: 960px;
 `

 const BadgeText = styled.div`
  font-weight: 500;
  font-size: 14px;
 `
-const ResponsiveGrid = styled.div`
-  width: 100%;
-  display: grid;
-  grid-gap: 1em;
-
-  grid-template-columns: 1.5fr repeat(2, 1fr);
-
-  @media screen and (max-width: 900px) {
-    grid-template-columns: 1.5fr repeat(2, 1fr);
-    & :nth-child(4) {
-      display: none;
-    }
-  }
-
-  @media screen and (max-width: 700px) {
-    grid-template-columns: 20px 1.5fr repeat(2, 1fr);
-    & :nth-child(4) {
-      display: none;
-    }
-    & :nth-child(5) {
-      display: none;
-    }
-  }
-`

 // responsive text
 // disable the warning because we don't use the end prop, we just want to filter it out
@ -80,14 +60,6 @@ const Label = styled(({ end, ...props }) => <TYPE.label {...props} />)<{ end?: b
  align-items: center;
 `

-const ActiveDot = styled.span`
-  background-color: ${({ theme }) => theme.success};
-  border-radius: 50%;
-  height: 8px;
-  width: 8px;
-  margin-right: 4px;
-`
-
 export const DarkBadge = styled.div`
  width: fit-content;
  border-radius: 8px;
@ -95,6 +67,37 @@ export const DarkBadge = styled.div`
  padding: 4px 6px;
 `

+const ExtentsText = styled.span`
+  color: ${({ theme }) => theme.text3};
+  font-size: 14px;
+  text-align: center;
+  margin-right: 4px;
+`
+
+const HoverText = styled(TYPE.main)`
+  text-decoration: none;
+  color: ${({ theme }) => theme.text3};
+  :hover {
+    color: ${({ theme }) => theme.text1};
+    text-decoration: none;
+  }
+`
+
+const DoubleArrow = styled.span`
+  color: ${({ theme }) => theme.text3};
+  margin: 0 1rem;
+`
+
+const ResponsiveButtonPrimary = styled(ButtonPrimary)`
+  border-radius: 12px;
+  padding: 6px 8px;
+  width: fit-content;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    flex: 1 1 auto;
+    width: 49%;
+  `};
+`
+
 function CurrentPriceCard({
  inverted,
  pool,
@ -106,22 +109,20 @@ function CurrentPriceCard({
  currencyQuote?: Currency
  currencyBase?: Currency
 }) {
+  const { t } = useTranslation()
  if (!pool || !currencyQuote || !currencyBase) {
    return null
  }

  return (
-    <DarkGreyCard width="32%">
-      <AutoColumn gap="sm" justify="flex-start">
-        <TYPE.main>Current</TYPE.main>
-        <RowFixed>
-          <TYPE.label>
-            {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)} {currencyQuote?.symbol} / 1{' '}
-            {currencyBase?.symbol}
-          </TYPE.label>
-        </RowFixed>
+    <LightCard padding="12px ">
+      <AutoColumn gap="md" justify="center">
+        <ExtentsText>{t('Current price')}</ExtentsText>
+        <TYPE.label textAlign="center">
+          {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)} {currencyQuote?.symbol}
+        </TYPE.label>
      </AutoColumn>
-    </DarkGreyCard>
+    </LightCard>
  )
 }

@ -132,6 +133,7 @@ export function PositionPage({
 }: RouteComponentProps<{ tokenId?: string }>) {
  const { t } = useTranslation()
  const { chainId, account, library } = useActiveWeb3React()
+  const theme = useTheme()

  const parsedTokenId = tokenIdFromUrl ? BigNumber.from(tokenIdFromUrl) : undefined
  const { loading, position: positionDetails } = useV3PositionFromTokenId(parsedTokenId)
@ -171,8 +173,10 @@ export function PositionPage({
    pool && typeof tickLower === 'number' && typeof tickUpper === 'number'
      ? pool.tickCurrent >= tickLower && pool.tickCurrent < tickUpper
      : false
-  const below = pool && typeof tickLower === 'number' ? pool.tickCurrent < tickLower : false
-  const above = pool && typeof tickUpper === 'number' ? pool.tickCurrent >= tickUpper : false
+
+  // keep will need to be able to draw the range visualization
+  // const below = pool && typeof tickLower === 'number' ? pool.tickCurrent < tickLower : false
+  // const above = pool && typeof tickUpper === 'number' ? pool.tickCurrent >= tickUpper : false

  // fees
  const [feeValue0, feeValue1] = useV3PositionFees(pool ?? undefined, positionDetails)
@ -254,204 +258,240 @@ export function PositionPage({
    </LoadingRows>
  ) : (
    <PageWrapper>
-      <AutoColumn gap="lg">
+      <AutoColumn gap="md">
        <AutoColumn gap="sm">
+          <Link style={{ textDecoration: 'none', width: 'fit-content', marginBottom: '0.5rem' }} to="/pool">
+            <HoverText>{'← Back to overview'}</HoverText>
+          </Link>
          <RowBetween>
            <RowFixed>
-              <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={20} margin={true} />
-              <TYPE.label fontSize={'20px'} mr="10px">
+              <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={24} margin={true} />
+              <TYPE.label fontSize={'24px'} mr="10px">
                &nbsp;{currencyQuote?.symbol}&nbsp;/&nbsp;{currencyBase?.symbol}
              </TYPE.label>
-              <Badge>
+              <Badge style={{ marginRight: '8px' }}>
                <BadgeText>{new Percent(feeAmount, 1_000_000).toSignificant()}%</BadgeText>
              </Badge>
+              <RangeBadge inRange={inRange} />
            </RowFixed>

            {ownsNFT && (
              <RowFixed>
-                {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash ? (
-                  <ButtonConfirmed
-                    disabled={collecting || !!collectMigrationHash}
-                    confirmed={!!collectMigrationHash && !isCollectPending}
-                    mr="15px"
-                    width="175px"
-                    padding="8px"
-                    style={{ borderRadius: '12px' }}
-                    onClick={collect}
-                  >
-                    {!!collectMigrationHash && !isCollectPending ? (
-                      'Collected'
-                    ) : isCollectPending || collecting ? (
-                      <Dots>Collecting</Dots>
-                    ) : (
-                      'Collect fees'
-                    )}
-                  </ButtonConfirmed>
-                ) : null}
                {currency0 && currency1 && feeAmount && tokenId ? (
-                  <Link to={`/increase/${currencyId(currency0)}/${currencyId(currency1)}/${feeAmount}/${tokenId}`}>
-                    <ButtonPrimary mr="15px" width="175px" padding="8px" borderRadius="12px">
-                      Add liquidity
-                    </ButtonPrimary>
-                  </Link>
+                  <ButtonGray
+                    as={Link}
+                    to={`/increase/${currencyId(currency0)}/${currencyId(currency1)}/${feeAmount}/${tokenId}`}
+                    width="fit-content"
+                    padding="6px 8px"
+                    borderRadius="12px"
+                    style={{ marginRight: '8px' }}
+                  >
+                    <PlusCircle size={16} style={{ marginRight: '8px' }} />{' '}
+                    <TYPE.body color={theme.text1}>{t('Add Liquidity')}</TYPE.body>
+                  </ButtonGray>
                ) : null}
                {tokenId && (
-                  <Link to={`/remove/${tokenId}`}>
-                    <ButtonPrimary width="175px" padding="8px" borderRadius="12px">
-                      Remove liquidity
-                    </ButtonPrimary>
-                  </Link>
+                  <ResponsiveButtonPrimary
+                    as={Link}
+                    to={`/remove/${tokenId}`}
+                    width="fit-content"
+                    padding="6px 8px"
+                    borderRadius="12px"
+                  >
+                    <MinusCircle size={16} style={{ marginRight: '8px' }} /> {t('Remove Liquidity')}
+                  </ResponsiveButtonPrimary>
                )}
              </RowFixed>
            )}
          </RowBetween>
-          <RowBetween>
-            <BadgeWrapper>
-              {inRange ? (
-                <Badge variant={BadgeVariant.DEFAULT}>
-                  <ActiveDot /> &nbsp;
-                  <BadgeText>{t('Active')}</BadgeText>
-                </Badge>
-              ) : (
-                <Badge variant={BadgeVariant.WARNING}>
-                  <AlertTriangle width={14} height={14} style={{ marginRight: '4px' }} />
-                  &nbsp;
-                  <BadgeText>{t('Out of range')}</BadgeText>
-                </Badge>
-              )}
-            </BadgeWrapper>
-          </RowBetween>
+          <RowBetween></RowBetween>
        </AutoColumn>
-        <Row align="stretch">
+        <RowBetween align="flex-start">
          {'result' in metadata ? (
-            <div style={{ marginRight: 12 }}>
-              <img src={metadata.result.image} />
-            </div>
+            <DarkCard
+              width="100%"
+              height="100%"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'column',
+                justifyContent: 'space-around',
+                marginRight: '12px',
+                maxWidth: '360px',
+              }}
+            >
+              <div style={{ marginRight: 12 }}>
+                <img height="400px" src={metadata.result.image} />
+              </div>
+            </DarkCard>
          ) : null}
-          <DarkCard>
-            <AutoColumn gap="lg">
-              <ResponsiveGrid>
-                <Label>Tokens</Label>
-                <Label end={true}>Liquidity</Label>
-                <Label end={true}>Fees</Label>
-              </ResponsiveGrid>
-              <ResponsiveGrid>
-                <RowFixed>
-                  <CurrencyLogo currency={currencyQuote} />
-                  <TYPE.label ml="10px">{currencyQuote?.symbol}</TYPE.label>
-                </RowFixed>
-                <Label end={true}>
-                  {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
-                </Label>
-                <Label end={true}>
-                  {inverted
-                    ? feeValue0
-                      ? formatTokenAmount(feeValue0, 4)
-                      : '-'
-                    : feeValue1
-                    ? formatTokenAmount(feeValue1, 4)
-                    : '-'}
-                </Label>
-              </ResponsiveGrid>
-              <ResponsiveGrid>
-                <RowFixed>
-                  <CurrencyLogo currency={currencyBase} />
-                  <TYPE.label ml="10px">{currencyBase?.symbol}</TYPE.label>
-                </RowFixed>
-                <Label end={true}>
-                  {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
-                </Label>
+          <AutoColumn gap="sm" style={{ width: '100%' }}>
+            <DarkCard>
+              <AutoColumn gap="lg" style={{ width: '100%' }}>
+                <AutoColumn gap="md">
+                  <Label>Position liquidity</Label>
+                  <TYPE.largeHeader fontSize="36px" fontWeight={500}>
+                    $1222.22
+                  </TYPE.largeHeader>
+                </AutoColumn>

-                <Label end={true}>
-                  {inverted
-                    ? feeValue1
-                      ? formatTokenAmount(feeValue1, 4)
-                      : '-'
-                    : feeValue0
-                    ? formatTokenAmount(feeValue0, 4)
-                    : '-'}
-                </Label>
-              </ResponsiveGrid>
-            </AutoColumn>
-          </DarkCard>
-        </Row>
+                <LightCard padding="12px 16px">
+                  <AutoColumn gap="md">
+                    <RowBetween>
+                      <RowFixed>
+                        <CurrencyLogo currency={currencyQuote} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>
+                          {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
+                        </TYPE.main>
+                      </RowFixed>
+                      <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
+                    </RowBetween>
+                    <RowBetween>
+                      <RowFixed>
+                        <CurrencyLogo currency={currencyBase} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>
+                          {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
+                        </TYPE.main>
+                      </RowFixed>
+                      <TYPE.main>{currencyBase?.symbol}</TYPE.main>
+                    </RowBetween>
+                  </AutoColumn>
+                </LightCard>
+              </AutoColumn>
+            </DarkCard>
+            <span style={{ width: '24px' }}></span>
+            <DarkCard>
+              <AutoColumn gap="lg" style={{ width: '100%' }}>
+                <AutoColumn gap="md">
+                  <RowBetween style={{ alignItems: 'flex-start' }}>
+                    <AutoColumn gap="md">
+                      <Label>Fees Earned</Label>
+                      <TYPE.largeHeader color={theme.green1} fontSize="36px" fontWeight={500}>
+                        $2.22
+                      </TYPE.largeHeader>
+                    </AutoColumn>
+                    {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash ? (
+                      <ButtonConfirmed
+                        disabled={collecting || !!collectMigrationHash}
+                        confirmed={!!collectMigrationHash && !isCollectPending}
+                        width="fit-content"
+                        style={{ borderRadius: '12px' }}
+                        padding="4px 8px"
+                        onClick={collect}
+                      >
+                        {!!collectMigrationHash && !isCollectPending ? (
+                          <TYPE.main color={theme.text1}> Collected</TYPE.main>
+                        ) : isCollectPending || collecting ? (
+                          <TYPE.main color={theme.text1}>
+                            {' '}
+                            <Dots>Collecting</Dots>
+                          </TYPE.main>
+                        ) : (
+                          <>
+                            <TYPE.main color={theme.white}>Collect fees</TYPE.main>
+                          </>
+                        )}
+                      </ButtonConfirmed>
+                    ) : null}
+                  </RowBetween>
+                </AutoColumn>
+
+                <LightCard padding="12px 16px">
+                  <AutoColumn gap="md">
+                    <RowBetween>
+                      <RowFixed>
+                        <CurrencyLogo currency={currencyQuote} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>
+                          {inverted
+                            ? feeValue0
+                              ? formatTokenAmount(feeValue0, 4)
+                              : '-'
+                            : feeValue1
+                            ? formatTokenAmount(feeValue1, 4)
+                            : '-'}
+                        </TYPE.main>
+                      </RowFixed>
+                      <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
+                    </RowBetween>
+                    <RowBetween>
+                      <RowFixed>
+                        <CurrencyLogo currency={currencyBase} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                        <TYPE.main>
+                          {inverted
+                            ? feeValue0
+                              ? formatTokenAmount(feeValue1, 4)
+                              : '-'
+                            : feeValue1
+                            ? formatTokenAmount(feeValue0, 4)
+                            : '-'}
+                        </TYPE.main>
+                      </RowFixed>
+                      <TYPE.main>{currencyBase?.symbol}</TYPE.main>
+                    </RowBetween>
+                  </AutoColumn>
+                </LightCard>
+              </AutoColumn>
+            </DarkCard>
+          </AutoColumn>
+        </RowBetween>
        <DarkCard>
-          <AutoColumn gap="lg">
-            <TYPE.label display="flex">
-              Position Limits
-              <ButtonText style={{ marginLeft: '10px', color: 'inherit' }}>
-                {manuallyInverted ? (
-                  <ToggleLeft onClick={() => setManuallyInverted(false)} />
-                ) : (
-                  <ToggleRight onClick={() => setManuallyInverted(true)} />
-                )}
-              </ButtonText>
-            </TYPE.label>
+          <AutoColumn gap="md">
+            <RowBetween>
+              <Label display="flex" style={{ marginRight: '12px' }}>
+                Price range
+              </Label>

-            {below && (
-              <CurrentPriceCard
-                inverted={inverted}
-                pool={pool}
-                currencyQuote={currencyQuote}
-                currencyBase={currencyBase}
-              />
-            )}
+              <RowFixed>
+                <RangeBadge inRange={inRange} />
+                <span style={{ width: '8px' }} />
+                {currencyBase && currencyQuote && (
+                  <RateToggle
+                    currencyA={currencyBase}
+                    currencyB={currencyQuote}
+                    handleRateToggle={() => setManuallyInverted(!manuallyInverted)}
+                  />
+                )}
+              </RowFixed>
+            </RowBetween>

            <RowBetween>
-              <DarkGreyCard width="32%">
-                <AutoColumn gap="sm" justify="flex-start">
-                  <TYPE.main>Lower</TYPE.main>
+              <LightCard padding="12px" width="100%">
+                <AutoColumn gap="12px" justify="center">
+                  <ExtentsText>Min</ExtentsText>
                  <RowFixed>
-                    <TYPE.label>
-                      {priceLower?.toSignificant(4)} {currencyQuote?.symbol} / 1 {currencyBase?.symbol}
+                    <TYPE.label textAlign="center">
+                      {priceLower?.toSignificant(4)} {currencyQuote?.symbol}
                    </TYPE.label>
                  </RowFixed>
-                  <DarkBadge>
-                    <RowFixed>
-                      <TYPE.label mr="6px">100%</TYPE.label>
-                      <CurrencyLogo currency={inverted ? currency1 : currency0} size="16px" />
-                      <TYPE.label ml="4px">{inverted ? currency1?.symbol : currency0?.symbol}</TYPE.label>
-                    </RowFixed>
-                  </DarkBadge>
+                  <TYPE.subHeader color={theme.text3} textAlign="center">
+                    Your position will be <CurrencyLogo currency={inverted ? currency1 : currency0} size="12px" /> 100%{' '}
+                    {inverted ? currency1?.symbol : currency0?.symbol} at this price
+                  </TYPE.subHeader>
                </AutoColumn>
-              </DarkGreyCard>
+              </LightCard>

-              {inRange && (
-                <CurrentPriceCard
-                  inverted={inverted}
-                  pool={pool}
-                  currencyQuote={currencyQuote}
-                  currencyBase={currencyBase}
-                />
-              )}
-
-              <DarkGreyCard width="32%">
-                <AutoColumn gap="sm" justify="flex-start">
-                  <TYPE.main>Upper</TYPE.main>
+              <DoubleArrow>⟷</DoubleArrow>
+              <LightCard padding="12px" width="100%">
+                <AutoColumn gap="12px" justify="center">
+                  <ExtentsText>Max</ExtentsText>
                  <RowFixed>
-                    <TYPE.label>
-                      {priceUpper?.toSignificant(4)} {currencyQuote?.symbol} / 1 {currencyBase?.symbol}
+                    <TYPE.label textAlign="center">
+                      {priceUpper?.toSignificant(4)} {currencyQuote?.symbol}
                    </TYPE.label>
                  </RowFixed>
-                  <DarkBadge>
-                    <RowFixed>
-                      <TYPE.label mr="6px">100%</TYPE.label>
-                      <CurrencyLogo currency={inverted ? currency0 : currency1} size="16px" />
-                      <TYPE.label ml="4px">{inverted ? currency0?.symbol : currency1?.symbol}</TYPE.label>
-                    </RowFixed>
-                  </DarkBadge>
+                  <TYPE.subHeader color={theme.text3} textAlign="center">
+                    Your position will be <CurrencyLogo currency={inverted ? currency0 : currency1} size="12px" /> 100%{' '}
+                    {inverted ? currency0?.symbol : currency1?.symbol} at this price
+                  </TYPE.subHeader>
                </AutoColumn>
-              </DarkGreyCard>
-
-              {above && (
-                <CurrentPriceCard
-                  inverted={inverted}
-                  pool={pool}
-                  currencyQuote={currencyQuote}
-                  currencyBase={currencyBase}
-                />
-              )}
+              </LightCard>
            </RowBetween>
+            <CurrentPriceCard
+              inverted={inverted}
+              pool={pool}
+              currencyQuote={currencyQuote}
+              currencyBase={currencyBase}
+            />
          </AutoColumn>
        </DarkCard>
      </AutoColumn>
--- a/src/pages/Pool/index.tsx
+++ b/src/pages/Pool/index.tsx
@ -15,6 +15,8 @@ import styled, { ThemeContext } from 'styled-components'
 import { HideSmall, TYPE } from 'theme'
 import { LoadingRows } from './styleds'

+import CTACards from './CTACards'
+
 const PageWrapper = styled(AutoColumn)`
  max-width: 870px;
  width: 100%;
@ -76,7 +78,7 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`

 const MainContentWrapper = styled.main`
  background-color: ${({ theme }) => theme.bg0};
-  padding: 16px;
+  padding: 8px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
@ -131,7 +133,7 @@ export default function Pool() {
          <AutoColumn gap="lg" style={{ width: '100%' }}>
            <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
              <HideSmall>
-                <TYPE.mediumHeader>Your Positions</TYPE.mediumHeader>
+                <TYPE.mediumHeader>{t('Pools Overview')}</TYPE.mediumHeader>
              </HideSmall>
              <ButtonRow>
                <Menu
@ -152,6 +154,8 @@ export default function Pool() {
              </ButtonRow>
            </TitleRow>

+            <CTACards />
+
            <MainContentWrapper>
              {positionsLoading ? (
                <LoadingRows>
@ -194,6 +198,16 @@ export default function Pool() {
                </NoLiquidity>
              )}
            </MainContentWrapper>
+            <RowFixed justify="center" style={{ width: '100%' }}>
+              <ButtonGray
+                as={Link}
+                to="/migrate/v2"
+                id="import-pool-link"
+                style={{ padding: '8px 16px', borderRadius: '12px', width: 'fit-content' }}
+              >
+                <TYPE.subHeader>{t('Looking for your V2 Liquidity')}?</TYPE.subHeader>
+              </ButtonGray>
+            </RowFixed>
          </AutoColumn>
        </AutoColumn>
      </PageWrapper>
--- a/src/pages/Pool/styleds.tsx
+++ b/src/pages/Pool/styleds.tsx
@ -68,6 +68,7 @@ const loadingAnimation = keyframes`
 export const LoadingRows = styled.div`
  display: grid;
  min-width: 75%;
+  max-width: 960px;
  grid-column-gap: 0.5em;
  grid-row-gap: 0.8em;
  grid-template-columns: repeat(3, 1fr);
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@ -143,7 +143,7 @@ export const TYPE = {
    return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
  },
  label(props: TextProps) {
-    return <TextWrapper fontWeight={600} color={'text1'} {...props} />
+    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
  },
  black(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'text1'} {...props} />