diff --git a/public/locales/en.json b/public/locales/en.json index 717b46f446..93dc1b19a8 100644 --- 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", diff --git a/src/components/Badge/RangeBadge.tsx b/src/components/Badge/RangeBadge.tsx new file mode 100644 index 0000000000..bb7e047f38 --- /dev/null +++ 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 ( + + {inRange ? ( + + +   + {t('In range')} + + + ) : ( + + + +   + {t('Out of range')} + + + )} + + ) +} diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 183b721fc5..c819d3f832 100644 --- 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)` diff --git a/src/components/PositionList/index.tsx b/src/components/PositionList/index.tsx index a443d9b40d..eff8f03b5f 100644 --- 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 ( <> -
{t('Position')}
-
{t('Range')}
-
{t('Liquidity')}
-
{t('Fees Earned')}
+
+ {t('Your positions')} + {positions && ' (' + positions.length + ')'} +
+
{t('Price range')}
 Your positions {positions.map((p) => { diff --git a/src/components/PositionListItem/index.tsx b/src/components/PositionListItem/index.tsx index 9a74af7ffd..f0f368e135 100644 --- 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 ( - + - +  {currencyQuote?.symbol} / {currencyBase?.symbol} @@ -242,61 +226,63 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr {outOfRange ? ( - - -   - {t('Out of range')} - + + + +   + {t('Out of range')} + + ) : ( - -   - {t('Active')} - + + +   + {t('In range')} + + )} - - - {priceLower && priceUpper ? ( - <> - - {formatPrice(priceLower, 4)} ↔ {formatPrice(priceUpper, 4)}{' '} - {currencyQuote?.symbol} -  /  - {currencyBase?.symbol} - - - ) : ( - - )} - - - {formattedAmount0 && formattedAmount1 ? ( - <> - - {inverted ? formattedAmount0 : formattedAmount1} {currencyQuote?.symbol} - - - {inverted ? formattedAmount1 : formattedAmount0} {currencyBase?.symbol} - - - ) : ( - - )} - - - {feeValue0 && feeValue1 ? ( - <> - - {formatTokenAmount(inverted ? feeValue0 : feeValue1, 4)} {currencyQuote?.symbol} - - - {formatTokenAmount(inverted ? feeValue1 : feeValue0, 4)} {currencyBase?.symbol} - - - ) : ( - - )} - + + + {priceLower && priceUpper ? ( + <> + {' '} + { + e.stopPropagation() + setManuallyInverted(!manuallyInverted) + }} + > + + + Min: + {formatPrice(priceLower, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '} + {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol} + {' '} + ⟷{' '} + + Max: + {formatPrice(priceUpper, 4)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' / '}{' '} + {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol} + {' '} + + + + ) : ( + + )} ) } diff --git a/src/components/RateToggle/index.tsx b/src/components/RateToggle/index.tsx index 00fe698da0..d1b7507e12 100644 --- 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 ? ( - - - {isSorted ? currencyA.symbol : currencyB.symbol} - - - {isSorted ? currencyB.symbol : currencyA.symbol} - - +
+ + + {isSorted ? currencyA.symbol : currencyB.symbol} {' price'} + + + + + {isSorted ? currencyB.symbol : currencyA.symbol} + {' price'} + + +
) : null } diff --git a/src/components/Toggle/MultiToggle.tsx b/src/components/Toggle/MultiToggle.tsx index 42c9a79ade..c6044087bb 100644 --- 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 diff --git a/src/pages/Pool/CTACards.tsx b/src/pages/Pool/CTACards.tsx new file mode 100644 index 0000000000..a5438564b3 --- /dev/null +++ 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 ( + + + + + {t('What’s new in V3 Liquidity Pools?')} + + + {t( + 'Learn all about concentrated liquidity and get informed about how to choose ranges that make sense for you.' + )} + + + + {t('↗')} + + + + + + {t('Top pools')} + + + {t('Explore the top pools with Uniswap Analytics.')} + + + + {t('↗')} + + + + ) +} diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx index 49e9e33fb6..671f8b867b 100644 --- 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 }) => )<{ 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 ( - - - Current - - - {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)} {currencyQuote?.symbol} / 1{' '} - {currencyBase?.symbol} - - + + + {t('Current price')} + + {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)} {currencyQuote?.symbol} + - + ) } @@ -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({ ) : ( - + + + {'← Back to overview'} + - - + +  {currencyQuote?.symbol} / {currencyBase?.symbol} - + {new Percent(feeAmount, 1_000_000).toSignificant()}% + {ownsNFT && ( - {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash ? ( - - {!!collectMigrationHash && !isCollectPending ? ( - 'Collected' - ) : isCollectPending || collecting ? ( - Collecting - ) : ( - 'Collect fees' - )} - - ) : null} {currency0 && currency1 && feeAmount && tokenId ? ( - - - Add liquidity - - + + {' '} + {t('Add Liquidity')} + ) : null} {tokenId && ( - - - Remove liquidity - - + + {t('Remove Liquidity')} + )} )} - - - {inRange ? ( - -   - {t('Active')} - - ) : ( - - -   - {t('Out of range')} - - )} - - + - + {'result' in metadata ? ( -
- -
+ +
+ +
+ ) : null} - - - - - - - - - - - {currencyQuote?.symbol} - - - - - - - - {currencyBase?.symbol} - - + + + + + + + $1222.22 + + - - - - - + + + + + + + {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)} + + + {currencyQuote?.symbol} + + + + + + {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)} + + + {currencyBase?.symbol} + + + + + + + + + + + + + + $2.22 + + + {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash ? ( + + {!!collectMigrationHash && !isCollectPending ? ( + Collected + ) : isCollectPending || collecting ? ( + + {' '} + Collecting + + ) : ( + <> + Collect fees + + )} + + ) : null} + + + + + + + + + + {inverted + ? feeValue0 + ? formatTokenAmount(feeValue0, 4) + : '-' + : feeValue1 + ? formatTokenAmount(feeValue1, 4) + : '-'} + + + {currencyQuote?.symbol} + + + + + + {inverted + ? feeValue0 + ? formatTokenAmount(feeValue1, 4) + : '-' + : feeValue1 + ? formatTokenAmount(feeValue0, 4) + : '-'} + + + {currencyBase?.symbol} + + + + + + + - - - Position Limits - - {manuallyInverted ? ( - setManuallyInverted(false)} /> - ) : ( - setManuallyInverted(true)} /> - )} - - + + + - {below && ( - - )} + + + + {currencyBase && currencyQuote && ( + setManuallyInverted(!manuallyInverted)} + /> + )} + + - - - Lower + + + Min - - {priceLower?.toSignificant(4)} {currencyQuote?.symbol} / 1 {currencyBase?.symbol} + + {priceLower?.toSignificant(4)} {currencyQuote?.symbol} - - - 100% - - {inverted ? currency1?.symbol : currency0?.symbol} - - + + Your position will be 100%{' '} + {inverted ? currency1?.symbol : currency0?.symbol} at this price + - + - {inRange && ( - - )} - - - - Upper + ⟷ + + + Max - - {priceUpper?.toSignificant(4)} {currencyQuote?.symbol} / 1 {currencyBase?.symbol} + + {priceUpper?.toSignificant(4)} {currencyQuote?.symbol} - - - 100% - - {inverted ? currency0?.symbol : currency1?.symbol} - - + + Your position will be 100%{' '} + {inverted ? currency0?.symbol : currency1?.symbol} at this price + - - - {above && ( - - )} + + diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx index ad7c6ac339..6ad0a49546 100644 --- 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() { - Your Positions + {t('Pools Overview')} + + {positionsLoading ? ( @@ -194,6 +198,16 @@ export default function Pool() { )} + + + {t('Looking for your V2 Liquidity')}? + + diff --git a/src/pages/Pool/styleds.tsx b/src/pages/Pool/styleds.tsx index c13b8e1e1c..7e5fbceda9 100644 --- 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); diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 47cb09491e..8bab3812ef 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -143,7 +143,7 @@ export const TYPE = { return }, label(props: TextProps) { - return + return }, black(props: TextProps) { return