From 9a326fa0237dc5558475e8152b63a97bd8ab2058 Mon Sep 17 00:00:00 2001 From: Callil Capuozzo Date: Tue, 4 May 2021 14:57:57 -0400 Subject: [PATCH] Add liquidity styles (#98) * Start styles * Add liquidity styles & consistency * clean up styles * remove un-used element * New styles * fix errors --- src/assets/svg/logo_white.svg | 25 ++- src/components/Card/index.tsx | 2 +- src/components/CurrencyInputPanel/index.tsx | 15 +- src/components/FeeSelector/index.tsx | 3 + .../InputStepCounter/InputStepCounter.tsx | 83 +++++----- src/components/Modal/index.tsx | 3 +- src/components/NavigationTabs/index.tsx | 6 +- src/components/PositionListItem/index.tsx | 2 +- src/components/PositionPreview/index.tsx | 123 +++++++++------ src/components/RangeSelector/index.tsx | 10 +- src/components/RateToggle/index.tsx | 18 +-- src/components/Toggle/MultiToggle.tsx | 4 +- src/pages/AddLiquidity/Review.tsx | 28 +--- src/pages/AddLiquidity/index.tsx | 79 +++++----- src/pages/AddLiquidity/styled.tsx | 4 +- src/pages/AppBody.tsx | 2 +- src/pages/Pool/PositionPage.tsx | 142 ++++++++++-------- src/pages/Pool/index.tsx | 14 +- src/pages/Pool/v2.tsx | 2 +- src/theme/index.tsx | 4 +- 20 files changed, 302 insertions(+), 267 deletions(-) diff --git a/src/assets/svg/logo_white.svg b/src/assets/svg/logo_white.svg index 38dfd21d86..33d484a3b3 100644 --- a/src/assets/svg/logo_white.svg +++ b/src/assets/svg/logo_white.svg @@ -1,16 +1,11 @@ - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 2b15e7b5ee..ce2d409d77 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -4,7 +4,7 @@ import { Box } from 'rebass/styled-components' const Card = styled(Box)<{ width?: string; padding?: string; border?: string; borderRadius?: string }>` width: ${({ width }) => width ?? '100%'}; border-radius: 16px; - padding: 1.25rem; + padding: 1rem; padding: ${({ padding }) => padding}; border: ${({ border }) => border}; border-radius: ${({ borderRadius }) => borderRadius}; diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx index 0eb8e9d36e..01282e5715 100644 --- a/src/components/CurrencyInputPanel/index.tsx +++ b/src/components/CurrencyInputPanel/index.tsx @@ -22,8 +22,8 @@ import { FiatValue } from './FiatValue' const InputPanel = styled.div<{ hideInput?: boolean }>` ${({ theme }) => theme.flexColumnNoWrap} position: relative; - border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')}; - background-color: ${({ theme }) => theme.bg2}; + border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')}; + background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.bg2)}; z-index: 1; width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; ` @@ -42,13 +42,13 @@ const FixedContainer = styled.div` ` const Container = styled.div<{ hideInput: boolean }>` - border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')}; - border: 1px solid ${({ theme }) => theme.bg2}; + border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')}; + border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.bg2)}; background-color: ${({ theme }) => theme.bg1}; width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; :focus, :hover { - border: 1px solid ${({ theme }) => theme.bg3}; + border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.bg3)}; } ` @@ -65,11 +65,11 @@ const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boole cursor: pointer; user-select: none; border: none; - height: ${({ hideInput }) => (hideInput ? '2.4rem' : '2.4rem')}; + height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.4rem')}; width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; padding: 0 8px; justify-content: space-between; - margin-right: 12px; + margin-right: ${({ hideInput }) => (hideInput ? '0' : '12px')}; :focus, :hover { background-color: ${({ selected, theme }) => (selected ? theme.bg3 : darken(0.05, theme.primary1))}; @@ -103,6 +103,7 @@ const Aligner = styled.span` display: flex; align-items: center; justify-content: space-between; + width: 100%; ` const StyledDropDown = styled(DropDown)<{ selected: boolean }>` diff --git a/src/components/FeeSelector/index.tsx b/src/components/FeeSelector/index.tsx index f90673c40c..36d5faafe1 100644 --- a/src/components/FeeSelector/index.tsx +++ b/src/components/FeeSelector/index.tsx @@ -29,6 +29,9 @@ export default function FeeSelector({ {t('selectPool')} + + Select a pool type based on your preferred liquidity provider fee. + keyframes` } ` -const SmallButton = styled(ButtonSecondary)` - background-color: ${({ theme }) => theme.bg2}; +const SmallButton = styled(ButtonPrimary)` + /* background-color: ${({ theme }) => theme.bg2}; */ border-radius: 8px; - padding: 4px; + padding: 4px 6px; width: 48%; ` -const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>` +const FocusedOutlineCard = styled(LightCard)<{ active?: boolean; pulsing?: boolean }>` border-color: ${({ active, theme }) => active && theme.blue1}; padding: 12px; - animation: ${({ pulsing, theme }) => pulsing && pulse(theme.blue1)} 0.8s linear; ` const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>` - background-color: transparent; - text-align: left; - margin-right: 2px; + /* background-color: ${({ theme }) => theme.bg0}; */ + text-align: center; + margin-right: 12px; + width: 100%; + font-weight: 500; ` -const ContentWrapper = styled(RowBetween)` - width: 92%; +const InputTitle = styled(TYPE.small)` + color: ${({ theme }) => theme.text2}; + font-size: 12px; + font-weight: 500; ` interface StepCounterProps { @@ -56,6 +59,9 @@ interface StepCounterProps { label?: string width?: string locked?: boolean // disable input + title: string + tokenA: string | undefined + tokenB: string | undefined } const StepCounter = ({ @@ -63,10 +69,12 @@ const StepCounter = ({ decrement, increment, feeAmount, - label, width, locked, onUserInput, + title, + tokenA, + tokenB, }: StepCounterProps) => { // for focus state, styled components doesnt let you select input parent container const [active, setActive] = useState(false) @@ -117,30 +125,33 @@ const StepCounter = ({ return ( - - - { - setLocalValue(val) - }} - /> - - {label && {label}} - {!locked ? ( - - - -{feeAmountFormatted}% - - - +{feeAmountFormatted}% - - - ) : null} + + + {title} + + { + setLocalValue(val) + }} + /> + + {tokenB + ' / ' + tokenA} + + {!locked ? ( + + + -{feeAmountFormatted}% + + + +{feeAmountFormatted}% + + + ) : null} ) } diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 7642c0021d..35c57bfdd2 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -35,7 +35,8 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r &[data-reach-dialog-content] { margin: 0 0 2rem 0; - background-color: ${({ theme }) => theme.bg1}; + background-color: ${({ theme }) => theme.bg0}; + border: 1px solid ${({ theme }) => theme.bg1}; box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)}; padding: 0px; width: 50vw; diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx index d96c1e05a3..25d8647299 100644 --- a/src/components/NavigationTabs/index.tsx +++ b/src/components/NavigationTabs/index.tsx @@ -101,11 +101,11 @@ export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating: adding && dispatch(resetMintState()) }} > - + - + {creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'} - + diff --git a/src/components/PositionListItem/index.tsx b/src/components/PositionListItem/index.tsx index 7dc2b05d16..480934c254 100644 --- a/src/components/PositionListItem/index.tsx +++ b/src/components/PositionListItem/index.tsx @@ -95,7 +95,7 @@ const DoubleArrow = styled.span` ` const RangeText = styled.span` - background-color: ${({ theme }) => theme.bg2}; + /* background-color: ${({ theme }) => theme.bg2}; */ padding: 0.25rem 0.5rem; border-radius: 8px; ` diff --git a/src/components/PositionPreview/index.tsx b/src/components/PositionPreview/index.tsx index 15aa4b073e..eea6ae093c 100644 --- a/src/components/PositionPreview/index.tsx +++ b/src/components/PositionPreview/index.tsx @@ -1,6 +1,6 @@ -import React, { useState, useCallback } from 'react' +import React, { useState, useCallback, useContext } from 'react' import { Position } from '@uniswap/v3-sdk' -import { DarkCard, DarkGreyCard } from 'components/Card' +import { LightCard } from 'components/Card' import { AutoColumn } from 'components/Column' import { TYPE } from 'theme' import { RowBetween, RowFixed } from 'components/Row' @@ -10,18 +10,25 @@ import { Break } from 'components/earn/styled' import { useTranslation } from 'react-i18next' import { Currency } from '@uniswap/sdk-core' import RateToggle from 'components/RateToggle' +import DoubleCurrencyLogo from 'components/DoubleLogo' +import RangeBadge from 'components/Badge/RangeBadge' +import { ThemeContext } from 'styled-components' export const PositionPreview = ({ position, title, + inRange, baseCurrencyDefault, }: { position: Position title?: string + inRange: boolean baseCurrencyDefault?: Currency | undefined }) => { const { t } = useTranslation() + const theme = useContext(ThemeContext) + const currency0 = unwrappedToken(position.pool.token0) const currency1 = unwrappedToken(position.pool.token1) @@ -48,7 +55,50 @@ export const PositionPreview = ({ }, [quoteCurrency]) return ( - + + + + + + {currency0?.symbol} / {currency1?.symbol} + + + + + + + + + + + {currency0?.symbol} + + + {position.amount0.toSignificant(4)} + + + + + + {currency1?.symbol} + + + {position.amount1.toSignificant(4)} + + + + + {t('feeTier')} + {position?.pool?.fee / 10000}% + + + + {title ? {title} :
} @@ -58,59 +108,48 @@ export const PositionPreview = ({ handleRateToggle={handleRateChange} /> + - - - {currency0?.symbol} - - - {position.amount0.toSignificant(4)} - - - - - - {currency1?.symbol} - - - {position.amount1.toSignificant(4)} - - - - - {t('feeTier')} - {position?.pool?.fee / 10000}% - - - Current {baseCurrency?.symbol} Price - {`${price.toSignificant(6)} ${quoteCurrency?.symbol}`} - - - + - Lower - {`${priceLower.toSignificant(4)}`} + Min price + {`${priceLower.toSignificant(4)}`} {` ${quoteCurrency.symbol}/${baseCurrency.symbol}`} + + {'Position will be'} {' 100% at this price.'} + - - - ⟷ - - + + + - Upper - {`${priceUpper.toSignificant(4)}`} + Max price + {`${priceUpper.toSignificant(4)}`} {` ${quoteCurrency.symbol}/${baseCurrency.symbol}`} + + {' Position will be 100% '} + {quoteCurrency?.symbol} {' at this price.'} + - + + + + Current price + {`${price.toSignificant(6)} `} + {` ${quoteCurrency.symbol}/${baseCurrency.symbol}`} + + - + ) } diff --git a/src/components/RangeSelector/index.tsx b/src/components/RangeSelector/index.tsx index 5a6b82e672..3555ebb86f 100644 --- a/src/components/RangeSelector/index.tsx +++ b/src/components/RangeSelector/index.tsx @@ -48,7 +48,10 @@ export default function RangeSelector({ decrement={isSorted ? getDecrementLower : getIncrementUpper} increment={isSorted ? getIncrementLower : getDecrementUpper} feeAmount={feeAmount} - label={leftPrice ? `${leftPrice.toSignificant(5)} ${currencyB?.symbol}/${currencyA?.symbol}` : '-'} + label={leftPrice ? `${currencyB?.symbol}` : '-'} + title={'Min price'} + tokenA={currencyA?.symbol} + tokenB={currencyB?.symbol} /> ) diff --git a/src/components/RateToggle/index.tsx b/src/components/RateToggle/index.tsx index d1b7507e12..6947ce02e3 100644 --- a/src/components/RateToggle/index.tsx +++ b/src/components/RateToggle/index.tsx @@ -3,15 +3,6 @@ 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 @@ -31,19 +22,14 @@ export default function RateToggle({ const isSorted = tokenA && tokenB && tokenA.sortsBefore(tokenB) - const [darkMode] = useDarkModeManager() - return tokenA && tokenB ? (
- {isSorted ? currencyA.symbol : currencyB.symbol} {' price'} + {isSorted ? currencyB.symbol + ' / ' + currencyA.symbol : currencyA.symbol + ' / ' + currencyB.symbol}{' '} - - - {isSorted ? currencyB.symbol : currencyA.symbol} - {' price'} + {isSorted ? currencyA.symbol + ' / ' + currencyB.symbol : currencyB.symbol + ' / ' + currencyA.symbol}
diff --git a/src/components/Toggle/MultiToggle.tsx b/src/components/Toggle/MultiToggle.tsx index c6044087bb..c9ab8a6642 100644 --- a/src/components/Toggle/MultiToggle.tsx +++ b/src/components/Toggle/MultiToggle.tsx @@ -5,10 +5,10 @@ export const ToggleWrapper = styled.button<{ width?: string }>` display: flex; align-items: center; width: ${({ width }) => width ?? '100%'}; - padding: 2px; + padding: 1px; background: ${({ theme }) => theme.bg1}; border-radius: 8px; - border: ${({ theme }) => '1px solid ' + theme.bg1}; + border: ${({ theme }) => '1px solid ' + theme.bg2}; cursor: pointer; outline: none; ` diff --git a/src/pages/AddLiquidity/Review.tsx b/src/pages/AddLiquidity/Review.tsx index cf4ef9c57b..1f68113b7c 100644 --- a/src/pages/AddLiquidity/Review.tsx +++ b/src/pages/AddLiquidity/Review.tsx @@ -1,18 +1,14 @@ import React from 'react' -import { RowBetween, RowFixed } from '../../components/Row' import { Field } from '../../state/mint/actions' -import { TYPE } from '../../theme' import { AutoColumn } from 'components/Column' import Card from 'components/Card' import styled from 'styled-components' -import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core' +import { CurrencyAmount, Price } from '@uniswap/sdk-core' import { Position } from '@uniswap/v3-sdk' -import DoubleCurrencyLogo from 'components/DoubleLogo' import { PositionPreview } from 'components/PositionPreview' -import { RangeBadge } from './styled' const Wrapper = styled.div` - padding-top: 20px; + padding-top: 12px; ` export const Badge = styled(Card)<{ inRange?: boolean }>` @@ -26,37 +22,19 @@ export const Badge = styled(Card)<{ inRange?: boolean }>` export function Review({ position, - currencies, outOfRange, - baseCurrency, }: { position?: Position existingPosition?: Position - currencies: { [field in Field]?: Currency } parsedAmounts: { [field in Field]?: CurrencyAmount } priceLower?: Price priceUpper?: Price outOfRange: boolean - baseCurrency?: Currency }) { - const currencyA: Currency | undefined = currencies[Field.CURRENCY_A] - const currencyB: Currency | undefined = currencies[Field.CURRENCY_B] - return ( - - - - - {currencyA?.symbol} / {currencyB?.symbol} - - - {outOfRange ? 'Out of range' : 'In Range'} - - {position ? ( - - ) : null} + {position ? : null} ) diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 89230c7395..4116122dac 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -2,18 +2,18 @@ import React, { useCallback, useContext, useMemo, useState } from 'react' import { TransactionResponse } from '@ethersproject/providers' import { Currency, TokenAmount, ETHER, currencyEquals } from '@uniswap/sdk-core' import { WETH9 } from '@uniswap/sdk-core' -import { Link2, AlertTriangle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import ReactGA from 'react-ga' import { useV3NFTPositionManagerContract } from '../../hooks/useContract' import { RouteComponentProps } from 'react-router-dom' import { Text } from 'rebass' import { ThemeContext } from 'styled-components' import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button' -import { YellowCard, OutlineCard, BlueCard } from '../../components/Card' -import { AutoColumn, ColumnCenter } from '../../components/Column' +import { YellowCard, OutlineCard, BlueCard, LightCard } from '../../components/Card' +import { AutoColumn } from '../../components/Column' import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal' import CurrencyInputPanel from '../../components/CurrencyInputPanel' -import { RowBetween, RowFixed } from '../../components/Row' +import { RowBetween } from '../../components/Row' import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported' import Review from './Review' import { useActiveWeb3React } from '../../hooks' @@ -25,13 +25,13 @@ import { Field, Bound } from '../../state/mint/actions' import { useTransactionAdder } from '../../state/transactions/hooks' import { useIsExpertMode, useUserSlippageTolerance } from '../../state/user/hooks' -import { TYPE } from '../../theme' +import { TYPE, ExternalLink } from '../../theme' import { maxAmountSpend } from '../../utils/maxAmountSpend' import AppBody from '../AppBody' import { Dots } from '../Pool/styleds' import { currencyId } from '../../utils/currencyId' import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter' -import { DynamicSection, CurrencyDropdown, StyledInput, Wrapper, RangeBadge, ScrollablePage } from './styled' +import { DynamicSection, CurrencyDropdown, StyledInput, Wrapper, ScrollablePage } from './styled' import { useTranslation } from 'react-i18next' import { useMintState, useMintActionHandlers, useDerivedMintInfo, useRangeHopCallbacks } from 'state/mint/hooks' import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk' @@ -39,7 +39,6 @@ import { NONFUNGIBLE_POSITION_MANAGER_ADDRESSES } from 'constants/v3' import { useV3PositionFromTokenId } from 'hooks/useV3Positions' import { useDerivedPositionInfo } from 'hooks/useDerivedPositionInfo' import { PositionPreview } from 'components/PositionPreview' -import DoubleCurrencyLogo from 'components/DoubleLogo' import FeeSelector from 'components/FeeSelector' import RangeSelector from 'components/RangeSelector' import RateToggle from 'components/RateToggle' @@ -352,18 +351,16 @@ export default function AddLiquidity({ onDismiss={handleDismissConfirmation} topContent={() => ( )} bottomContent={() => ( - + Add @@ -376,8 +373,8 @@ export default function AddLiquidity({ - - {!hasExistingPosition ? ( + + {!hasExistingPosition && ( <> @@ -401,6 +398,7 @@ export default function AddLiquidity({ id="add-liquidity-input-tokena" showCommonBases /> +
{' '} - ) : ( - - - - - {currencyA?.symbol} / {currencyB?.symbol} - - - {outOfRange ? 'Out of range' : 'In Range'} - )} {hasExistingPosition && existingPosition ? ( - + ) : ( <> {t('selectLiquidityRange')} + {baseCurrency && quoteCurrency ? ( ) : null} - - {price && baseCurrency && quoteCurrency && !noLiquidity && ( - - Current Price - - {invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)} {quoteCurrency?.symbol}{' '} - = 1 {baseCurrency.symbol} - - - )} + + Your liquidity will only be active and earning fees when the price of the pool is within this price + range.{' '} + + Need help picking a range? + + + {price && baseCurrency && quoteCurrency && !noLiquidity && ( + + + + Current Price + + + {invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)}{' '} + + + {quoteCurrency?.symbol} {' / '} + {baseCurrency.symbol} + + + + )} + {outOfRange ? ( @@ -575,10 +573,6 @@ export default function AddLiquidity({ locked={depositADisabled} /> - - - - - {/* )} */} {addIsUnsupported && ( theme.mediaWidth.upToSmall` min-width: 400px; @@ -45,7 +45,7 @@ export const FixedPreview = styled.div` 0px 24px 32px rgba(0, 0, 0, 0.01); border-radius: 12px; position: sticky; - top: 90px; + top: 64px; ` export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>` diff --git a/src/pages/AppBody.tsx b/src/pages/AppBody.tsx index 33927e80c1..65f39dc64a 100644 --- a/src/pages/AppBody.tsx +++ b/src/pages/AppBody.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components' export const BodyWrapper = styled.div<{ margin?: string }>` position: relative; margin-top: ${({ margin }) => margin ?? '0px'}; - max-width: 460px; + max-width: 480px; width: 100%; background: ${({ theme }) => theme.bg0}; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx index 8fbe5f3b71..ad8acea3df 100644 --- a/src/pages/Pool/PositionPage.tsx +++ b/src/pages/Pool/PositionPage.tsx @@ -16,7 +16,7 @@ import { HideExtraSmall, TYPE } from 'theme' import Badge from 'components/Badge' import { calculateGasMargin } from 'utils' import { ButtonConfirmed, ButtonPrimary, ButtonGray } from 'components/Button' -import { DarkCard, LightCard } from 'components/Card' +import { DarkCard, DarkGreyCard, LightCard } from 'components/Card' import CurrencyLogo from 'components/CurrencyLogo' import { useTranslation } from 'react-i18next' import { currencyId } from 'utils/currencyId' @@ -33,7 +33,6 @@ 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' @@ -88,10 +87,11 @@ export const DarkBadge = styled.div` ` const ExtentsText = styled.span` - color: ${({ theme }) => theme.text3}; + color: ${({ theme }) => theme.text2}; font-size: 14px; text-align: center; margin-right: 4px; + font-weight: 500; ` const HoverText = styled(TYPE.main)` @@ -139,6 +139,8 @@ function CurrentPriceCard({ currencyBase?: Currency ratio?: number }) { + const theme = useTheme() + const { t } = useTranslation() if (!pool || !currencyQuote || !currencyBase) { return null @@ -146,18 +148,19 @@ function CurrentPriceCard({ return ( - + {t('Current price')} - - {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)} {currencyQuote?.symbol} - - {typeof ratio === 'number' && ( - - Your position is {ratio}% {currencyBase?.symbol} and{' '} - {100 - ratio}% {currencyQuote?.symbol} - - )} + + {(inverted ? pool.token1Price : pool.token0Price).toSignificant(4)}{' '} + + {currencyQuote?.symbol + ' / ' + currencyBase?.symbol} + + {typeof ratio === 'number' && ( + + Your position is currently {ratio}% {currencyBase?.symbol} and {100 - ratio}% {currencyQuote?.symbol} + + )} ) } @@ -418,8 +421,7 @@ export function PositionPage({ borderRadius="12px" style={{ marginRight: '8px' }} > - {' '} - {t('Add Liquidity')} + {t('Add Liquidity')} ) : null} {tokenId && ( @@ -430,7 +432,7 @@ export function PositionPage({ padding="6px 8px" borderRadius="12px" > - {t('Remove Liquidity')} + {t('Remove Liquidity')} )} @@ -471,11 +473,15 @@ export function PositionPage({ - - {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) && ( + + {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) ? ( ${fiatValueOfLiquidity.toFixed(2)} + ) : ( + + $- + )} @@ -483,20 +489,38 @@ export function PositionPage({ - - {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)} - + {currencyQuote?.symbol} + + + + {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)} ( + + {typeof ratio === 'number' && ( + + + {100 - ratio}% + + + )} - {currencyQuote?.symbol} - - {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)} - + {currencyBase?.symbol} + + + + {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)} ( + + {typeof ratio === 'number' && ( + + + {ratio}% + + + )} - {currencyBase?.symbol} @@ -508,10 +532,14 @@ export function PositionPage({ - {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) && ( + {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? ( ${fiatValueOfFees.toFixed(2)} + ) : ( + + $- + )} {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash ? ( @@ -544,6 +572,9 @@ export function PositionPage({ + {currencyQuote?.symbol} + + {inverted ? feeValue0 @@ -554,11 +585,13 @@ export function PositionPage({ : '-'} - {currencyQuote?.symbol} + {currencyBase?.symbol} + + {inverted ? feeValue0 @@ -569,7 +602,6 @@ export function PositionPage({ : '-'} - {currencyBase?.symbol} @@ -604,47 +636,27 @@ export function PositionPage({ - - Min - - - {priceLower?.toSignificant(4)} {currencyQuote?.symbol} - - - {(inverted ? below : above) ? ( - - Your position will be {' '} - 100% {inverted ? currency1?.symbol : currency0?.symbol} at this price - - ) : ( - - Your position is 100%{' '} - {inverted ? currency1?.symbol : currency0?.symbol} - - )} + + Min price + {priceLower?.toSignificant(4)} + {currencyQuote?.symbol + ' / ' + currencyBase?.symbol} + + {' Your position is will be 100% '} + {currencyBase?.symbol} {' at this price.'} + ⟷ - - Max - - - {priceUpper?.toSignificant(4)} {currencyQuote?.symbol} - - - {(inverted ? above : below) ? ( - - Your position will be {' '} - 100% {inverted ? currency0?.symbol : currency1?.symbol} at this price - - ) : ( - - Your position is 100%{' '} - {inverted ? currency0?.symbol : currency1?.symbol} - - )} + + Max price + {priceUpper?.toSignificant(4)} + {currencyQuote?.symbol + ' / ' + currencyBase?.symbol} + + {' Your position is will be 100% '} + {currencyQuote?.symbol} {' at this price.'} + diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx index f408fada51..a3d62a3061 100644 --- a/src/pages/Pool/index.tsx +++ b/src/pages/Pool/index.tsx @@ -115,7 +115,17 @@ export default function Pool() { content: ( - {t('Migrate V2 Liquidity')} + {t('Migrate')} + + ), + link: '/migrate/v2', + external: false, + }, + { + content: ( + + + {t('V2 liquidity')} ), link: '/migrate/v2', @@ -209,7 +219,7 @@ export default function Pool() { diff --git a/src/pages/Pool/v2.tsx b/src/pages/Pool/v2.tsx index f31b1d3c00..17b89f2dea 100644 --- a/src/pages/Pool/v2.tsx +++ b/src/pages/Pool/v2.tsx @@ -155,7 +155,7 @@ export default function Pool() { - Your liquidity + Your V2 liquidity diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 7d0346737d..a0f1bcfd3f 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 @@ -221,7 +221,7 @@ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - font-feature-settings: 'ss01' on, 'cv01' on, 'cv03' on; + font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on; } `