Skip to content

I
interface
Commit b39f2fe0 authored by Noah Zinsmeister's avatar Noah Zinsmeister
Browse files
Options

Merge remote-tracking branch 'refs/remotes/origin/main'

parents 516e783b 9a326fa0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 263 deletions
src/assets/svg/logo_white.svg
View file @ b39f2fe0
This diff is collapsed.
src/components/Card/index.tsx
View file @ b39f2fe0
......@@ -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};
......
src/components/CurrencyInputPanel/index.tsx
View file @ b39f2fe0
......@@ -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 }>`
......
src/components/FeeSelector/index.tsx
View file @ b39f2fe0
......@@ -29,6 +29,9 @@ export default function FeeSelector({
<AutoColumn gap="16px">
<DynamicSection gap="md" disabled={disabled}>
<TYPE.label>{t('selectPool')}</TYPE.label>
<TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
Select a pool type based on your preferred liquidity provider fee.
</TYPE.main>
<RowBetween>
<ButtonRadioChecked
width="32%"
......
src/components/InputStepCounter/InputStepCounter.tsx
View file @ b39f2fe0
import React, { useState, useCallback, useEffect } from 'react'
import { OutlineCard } from 'components/Card'
import { LightCard } from 'components/Card'
import { RowBetween } from 'components/Row'
import { Input as NumericalInput } from '../NumericalInput'
import styled, { keyframes } from 'styled-components'
import { TYPE } from 'theme'
import { AutoColumn } from 'components/Column'
import { ButtonSecondary } from 'components/Button'
import { ButtonPrimary } from 'components/Button'
import { FeeAmount } from '@uniswap/v3-sdk'
import { formattedFeeAmount } from 'utils'
......@@ -23,28 +23,31 @@ const pulse = (color: string) => 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 (
<FocusedOutlineCard pulsing={pulsing} active={active} onFocus={handleOnFocus} onBlur={handleOnBlur} width={width}>
<AutoColumn gap="md">
<ContentWrapper>
<StyledInput
className="rate-input-0"
value={localValue}
fontSize="18px"
disabled={locked}
onUserInput={(val) => {
setLocalValue(val)
}}
/>
</ContentWrapper>
{label && <TYPE.label fontSize="12px">{label}</TYPE.label>}
{!locked ? (
<RowBetween>
<SmallButton onClick={handleDecrement}>
<TYPE.main fontSize="12px">-{feeAmountFormatted}%</TYPE.main>
</SmallButton>
<SmallButton onClick={handleIncrement}>
<TYPE.main fontSize="12px">+{feeAmountFormatted}%</TYPE.main>
</SmallButton>
</RowBetween>
) : null}
<AutoColumn gap="6px" style={{ marginBottom: '12px' }}>
<InputTitle fontSize={12} textAlign="center">
{title}
</InputTitle>
<StyledInput
className="rate-input-0"
value={localValue}
fontSize="20px"
disabled={locked}
onUserInput={(val) => {
setLocalValue(val)
}}
/>
<InputTitle fontSize={12} textAlign="center">
{tokenB + ' / ' + tokenA}
</InputTitle>
</AutoColumn>
{!locked ? (
<RowBetween>
<SmallButton onClick={handleDecrement}>
<TYPE.black fontSize="12px">-{feeAmountFormatted}%</TYPE.black>
</SmallButton>
<SmallButton onClick={handleIncrement}>
<TYPE.black fontSize="12px">+{feeAmountFormatted}%</TYPE.black>
</SmallButton>
</RowBetween>
) : null}
</FocusedOutlineCard>
)
}
......
src/components/Modal/index.tsx
View file @ b39f2fe0
......@@ -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;
......
src/components/NavigationTabs/index.tsx
View file @ b39f2fe0
......@@ -101,11 +101,11 @@ export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating:
adding && dispatch(resetMintState())
}}
>
<StyledArrowLeft stroke={theme.text2} opacity="0.6" />
<StyledArrowLeft stroke={theme.text2} />
</HistoryLink>
<TYPE.black fontWeight={500} fontSize={16} style={{ opacity: '0.6' }}>
<TYPE.mediumHeader fontWeight={500} fontSize={20}>
{creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}
</TYPE.black>
</TYPE.mediumHeader>
<Settings />
</RowBetween>
</Tabs>
......
src/components/PositionListItem/index.tsx
View file @ b39f2fe0
......@@ -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;
`
......
src/components/PositionPreview/index.tsx
View file @ b39f2fe0
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 (
<DarkGreyCard>
<AutoColumn gap="md" style={{ marginTop: '0.5rem' }}>
<RowBetween style={{ marginBottom: '0.5rem' }}>
<RowFixed>
<DoubleCurrencyLogo
currency0={currency0 ?? undefined}
currency1={currency1 ?? undefined}
size={24}
margin={true}
/>
<TYPE.label ml="10px" fontSize="24px">
{currency0?.symbol} / {currency1?.symbol}
</TYPE.label>
</RowFixed>
<RangeBadge inRange={inRange} />
</RowBetween>
<LightCard>
<AutoColumn gap="md">
<RowBetween>
<RowFixed>
<CurrencyLogo currency={currency0} />
<TYPE.label ml="8px">{currency0?.symbol}</TYPE.label>
</RowFixed>
<RowFixed>
<TYPE.label mr="8px">{position.amount0.toSignificant(4)}</TYPE.label>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<CurrencyLogo currency={currency1} />
<TYPE.label ml="8px">{currency1?.symbol}</TYPE.label>
</RowFixed>
<RowFixed>
<TYPE.label mr="8px">{position.amount1.toSignificant(4)}</TYPE.label>
</RowFixed>
</RowBetween>
<Break />
<RowBetween>
<TYPE.label>{t('feeTier')}</TYPE.label>
<TYPE.label>{position?.pool?.fee / 10000}%</TYPE.label>
</RowBetween>
</AutoColumn>
</LightCard>
<AutoColumn gap="md">
<RowBetween>
{title ? <TYPE.main>{title}</TYPE.main> : <div />}
......@@ -58,59 +108,48 @@ export const PositionPreview = ({
handleRateToggle={handleRateChange}
/>
</RowBetween>
<RowBetween>
<RowFixed>
<CurrencyLogo currency={currency0} />
<TYPE.label ml="8px">{currency0?.symbol}</TYPE.label>
</RowFixed>
<RowFixed>
<TYPE.label mr="8px">{position.amount0.toSignificant(4)}</TYPE.label>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<CurrencyLogo currency={currency1} />
<TYPE.label ml="8px">{currency1?.symbol}</TYPE.label>
</RowFixed>
<RowFixed>
<TYPE.label mr="8px">{position.amount1.toSignificant(4)}</TYPE.label>
</RowFixed>
</RowBetween>
<Break />
<RowBetween>
<TYPE.label>{t('feeTier')}</TYPE.label>
<TYPE.label>{position?.pool?.fee / 10000}%</TYPE.label>
</RowBetween>
<RowBetween>
<TYPE.label>Current {baseCurrency?.symbol} Price</TYPE.label>
<TYPE.label>{`${price.toSignificant(6)} ${quoteCurrency?.symbol}`}</TYPE.label>
</RowBetween>
<RowBetween>
<DarkCard width="46%" padding="8px">
<LightCard width="48%" padding="8px">
<AutoColumn gap="4px" justify="center">
<TYPE.main fontSize="12px">Lower</TYPE.main>
<TYPE.label textAlign="center">{`${priceLower.toSignificant(4)}`}</TYPE.label>
<TYPE.main fontSize="12px">Min price</TYPE.main>
<TYPE.mediumHeader textAlign="center">{`${priceLower.toSignificant(4)}`}</TYPE.mediumHeader>
<TYPE.main
textAlign="center"
fontSize="12px"
>{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
<TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
{'Position will be'} <CurrencyLogo currency={baseCurrency} size="10px" /> {' 100% at this price.'}
</TYPE.small>
</AutoColumn>
</DarkCard>
<TYPE.main ml="4px" mr="4px">
⟷
</TYPE.main>
<DarkCard width="46%" padding="8px">
</LightCard>
<LightCard width="48%" padding="8px">
<AutoColumn gap="4px" justify="center">
<TYPE.main fontSize="12px">Upper</TYPE.main>
<TYPE.label textAlign="center">{`${priceUpper.toSignificant(4)}`}</TYPE.label>
<TYPE.main fontSize="12px">Max price</TYPE.main>
<TYPE.mediumHeader textAlign="center">{`${priceUpper.toSignificant(4)}`}</TYPE.mediumHeader>
<TYPE.main
textAlign="center"
fontSize="12px"
>{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
<TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
{' Position will be 100% '}
{quoteCurrency?.symbol} {' at this price.'}
</TYPE.small>
</AutoColumn>
</DarkCard>
</LightCard>
</RowBetween>
<LightCard padding="12px ">
<AutoColumn gap="4px" justify="center">
<TYPE.main fontSize="12px">Current price</TYPE.main>
<TYPE.mediumHeader>{`${price.toSignificant(6)} `}</TYPE.mediumHeader>
<TYPE.main
textAlign="center"
fontSize="12px"
>{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
</AutoColumn>
</LightCard>
</AutoColumn>
</DarkGreyCard>
</AutoColumn>
)
}
src/components/RangeSelector/index.tsx
View file @ b39f2fe0
......@@ -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}
/>
<StepCounter
value={rightPrice?.toSignificant(5) ?? ''}
......@@ -57,7 +60,10 @@ export default function RangeSelector({
decrement={isSorted ? getDecrementUpper : getIncrementLower}
increment={isSorted ? getIncrementUpper : getDecrementLower}
feeAmount={feeAmount}
label={rightPrice ? `${rightPrice.toSignificant(5)} ${currencyB?.symbol}/${currencyA?.symbol}` : '-'}
label={rightPrice ? `${currencyB?.symbol}` : '-'}
tokenA={currencyA?.symbol}
tokenB={currencyB?.symbol}
title={'Max price'}
/>
</RowBetween>
)
......
src/components/RateToggle/index.tsx
View file @ b39f2fe0
......@@ -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 ? (
<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'}
{isSorted ? currencyB.symbol + ' / ' + currencyA.symbol : currencyA.symbol + ' / ' + currencyB.symbol}{' '}
</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'}
{isSorted ? currencyA.symbol + ' / ' + currencyB.symbol : currencyB.symbol + ' / ' + currencyA.symbol}
</ToggleElement>
</ToggleWrapper>
</div>
......
src/components/Toggle/MultiToggle.tsx
View file @ b39f2fe0
......@@ -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;
`
......
src/pages/AddLiquidity/Review.tsx
View file @ b39f2fe0
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 (
<Wrapper>
<AutoColumn gap="lg">
<RowBetween>
<RowFixed>
<DoubleCurrencyLogo currency0={currencyA} currency1={currencyB} size={24} margin={true} />
<TYPE.label ml="10px" fontSize="24px">
{currencyA?.symbol} / {currencyB?.symbol}
</TYPE.label>
</RowFixed>
<RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
</RowBetween>
{position ? (
<PositionPreview position={position} title={'Tokens To Add'} baseCurrencyDefault={baseCurrency} />
) : null}
{position ? <PositionPreview position={position} inRange={!outOfRange} title={'Selected Range'} /> : null}
</AutoColumn>
</Wrapper>
)
......
src/pages/AddLiquidity/index.tsx
View file @ b39f2fe0
......@@ -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={() => (
<Review
currencies={currencies}
parsedAmounts={parsedAmounts}
position={position}
existingPosition={existingPosition}
priceLower={priceLower}
priceUpper={priceUpper}
outOfRange={outOfRange}
baseCurrency={baseCurrency ?? undefined}
/>
)}
bottomContent={() => (
<ButtonPrimary onClick={onAdd} mt="16px">
<ButtonPrimary style={{ marginTop: '1rem' }} onClick={onAdd}>
<Text fontWeight={500} fontSize={20}>
Add
</Text>
......@@ -376,8 +373,8 @@ export default function AddLiquidity({
<AppBody>
<AddRemoveTabs creating={false} adding={true} />
<Wrapper>
<AutoColumn gap="lg">
{!hasExistingPosition ? (
<AutoColumn gap="32px">
{!hasExistingPosition && (
<>
<AutoColumn gap="md">
<RowBetween paddingBottom="20px">
......@@ -401,6 +398,7 @@ export default function AddLiquidity({
id="add-liquidity-input-tokena"
showCommonBases
/>
<div style={{ width: '12px' }}></div>
<CurrencyDropdown
value={formattedAmounts[Field.CURRENCY_B]}
......@@ -418,25 +416,10 @@ export default function AddLiquidity({
</RowBetween>
</AutoColumn>{' '}
</>
) : (
<RowBetween>
<RowFixed>
<DoubleCurrencyLogo
currency0={currencyA ?? undefined}
currency1={currencyB ?? undefined}
size={24}
margin={true}
/>
<TYPE.label ml="10px" fontSize="24px">
{currencyA?.symbol} / {currencyB?.symbol}
</TYPE.label>
</RowFixed>
<RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
</RowBetween>
)}
{hasExistingPosition && existingPosition ? (
<PositionPreview position={existingPosition} title={'Current Position'} />
<PositionPreview position={existingPosition} title={'Selected Range'} inRange={!outOfRange} />
) : (
<>
<FeeSelector
......@@ -493,6 +476,7 @@ export default function AddLiquidity({
<DynamicSection gap="md" disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}>
<RowBetween>
<TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
{baseCurrency && quoteCurrency ? (
<RateToggle
currencyA={baseCurrency}
......@@ -505,16 +489,13 @@ export default function AddLiquidity({
/>
) : null}
</RowBetween>
{price && baseCurrency && quoteCurrency && !noLiquidity && (
<RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
<TYPE.main>Current Price</TYPE.main>
<TYPE.main>
{invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)} {quoteCurrency?.symbol}{' '}
= 1 {baseCurrency.symbol}
</TYPE.main>
</RowBetween>
)}
<TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
Your liquidity will only be active and earning fees when the price of the pool is within this price
range.{' '}
<ExternalLink href={''} style={{ fontSize: '14px' }}>
Need help picking a range?
</ExternalLink>
</TYPE.main>
<RangeSelector
priceLower={priceLower}
......@@ -530,6 +511,23 @@ export default function AddLiquidity({
feeAmount={feeAmount}
/>
{price && baseCurrency && quoteCurrency && !noLiquidity && (
<LightCard style={{ padding: '12px' }}>
<AutoColumn gap="4px">
<TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
Current Price
</TYPE.main>
<TYPE.body fontWeight={500} textAlign="center" fontSize={20}>
{invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)}{' '}
</TYPE.body>
<TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
{quoteCurrency?.symbol} {' / '}
{baseCurrency.symbol}
</TYPE.main>
</AutoColumn>
</LightCard>
)}
{outOfRange ? (
<YellowCard padding="8px 12px" borderRadius="12px">
<RowBetween>
......@@ -575,10 +573,6 @@ export default function AddLiquidity({
locked={depositADisabled}
/>
<ColumnCenter>
<Link2 stroke={theme.text2} size={'24px'} />
</ColumnCenter>
<CurrencyInputPanel
value={formattedAmounts[Field.CURRENCY_B]}
onUserInput={onFieldBInput}
......@@ -662,7 +656,6 @@ export default function AddLiquidity({
</AutoColumn>
</Wrapper>
</AppBody>
{/* )} */}
{addIsUnsupported && (
<UnsupportedCurrencyFooter
show={addIsUnsupported}
......
src/pages/AddLiquidity/styled.tsx
View file @ b39f2fe0
......@@ -7,7 +7,7 @@ import Input from 'components/NumericalInput'
export const Wrapper = styled.div`
position: relative;
padding: 20px;
min-width: 460px;
min-width: 480px;
${({ theme }) => 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 }>`
......
src/pages/AppBody.tsx
View file @ b39f2fe0
......@@ -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),
......
src/pages/Pool/PositionPage.tsx
View file @ b39f2fe0
This diff is collapsed.
src/pages/Pool/index.tsx
View file @ b39f2fe0
......@@ -115,7 +115,17 @@ export default function Pool() {
content: (
<MenuItem>
<Download size={16} style={{ marginRight: '8px' }} />
{t('Migrate V2 Liquidity')}
{t('Migrate')}
</MenuItem>
),
link: '/migrate/v2',
external: false,
},
{
content: (
<MenuItem>
<Download size={16} style={{ marginRight: '8px' }} />
{t('V2 liquidity')}
</MenuItem>
),
link: '/migrate/v2',
......@@ -209,7 +219,7 @@ export default function Pool() {
<RowFixed justify="center" style={{ width: '100%' }}>
<ButtonGray
as={Link}
to="/migrate/v2"
to="/pool/v2"
id="import-pool-link"
style={{ padding: '8px 16px', borderRadius: '12px', width: 'fit-content' }}
>
......
src/pages/Pool/v2.tsx
View file @ b39f2fe0
......@@ -155,7 +155,7 @@ export default function Pool() {
<TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
<HideSmall>
<TYPE.mediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
Your liquidity
Your V2 liquidity
</TYPE.mediumHeader>
</HideSmall>
<ButtonRow>
......
src/theme/index.tsx
View file @ b39f2fe0
......@@ -143,7 +143,7 @@ export const TYPE = {
return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
},
label(props: TextProps) {
return <TextWrapper fontWeight={500} color={'text1'} {...props} />
return <TextWrapper fontWeight={600} color={'text1'} {...props} />
},
black(props: TextProps) {
return <TextWrapper fontWeight={500} color={'text1'} {...props} />
......@@ -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;
}
`
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment