Skip to content

I
interface
Commit 807860aa authored by Ian Lapham's avatar Ian Lapham Committed by GitHub
Browse files
Options

refactor review modals (#60)

parent ee0db4f2
Hide whitespace changes
Inline Side-by-side
Showing with 343 additions and 549 deletions
src/components/NavigationTabs/index.tsx
View file @ 807860aa
......@@ -11,6 +11,8 @@ import Settings from '../Settings'
import { useDispatch } from 'react-redux'
import { AppDispatch } from 'state'
import { resetMintState } from 'state/mint/actions'
import { TYPE } from 'theme'
import useTheme from 'hooks/useTheme'
const Tabs = styled.div`
${({ theme }) => theme.flexRowNoWrap}
......@@ -85,6 +87,8 @@ export function FindPoolTabs({ origin }: { origin: string }) {
}
export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating: boolean }) {
const theme = useTheme()
// reset states on back
const dispatch = useDispatch<AppDispatch>()
......@@ -97,9 +101,11 @@ export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating:
adding && dispatch(resetMintState())
}}
>
<StyledArrowLeft />
<StyledArrowLeft stroke={theme.text2} opacity="0.6" />
</HistoryLink>
<ActiveText>{creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}</ActiveText>
<TYPE.black fontWeight={500} fontSize={16} style={{ opacity: '0.6' }}>
{creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}
</TYPE.black>
<Settings />
</RowBetween>
</Tabs>
......
src/components/TransactionConfirmationModal/index.tsx
View file @ 807860aa
......@@ -24,7 +24,6 @@ const Section = styled(AutoColumn)<{ inline?: boolean }>`
`
const BottomSection = styled(Section)`
// background-color: ${({ theme }) => theme.bg2};
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
`
......@@ -157,7 +156,7 @@ export function ConfirmationModalContent({
bottomContent?: () => React.ReactNode | undefined
}) {
return (
<Wrapper>
<Wrapper style={{ padding: 0 }}>
<Section>
<RowBetween>
<Text fontWeight={500} fontSize={16}>
......
src/pages/AddLiquidity/ConfirmAddModalBottom.tsx deleted 100644 → 0
View file @ ee0db4f2
import { Currency, CurrencyAmount, Fraction, Percent } from '@uniswap/sdk-core'
import React from 'react'
import { Text } from 'rebass'
import { ButtonPrimary } from '../../components/Button'
import { RowBetween, RowFixed } from '../../components/Row'
import CurrencyLogo from '../../components/CurrencyLogo'
import { Field } from '../../state/mint/actions'
import { TYPE } from '../../theme'
export function ConfirmAddModalBottom({
noLiquidity,
price,
currencies,
parsedAmounts,
poolTokenPercentage,
onAdd,
}: {
noLiquidity?: boolean
price?: Fraction
currencies: { [field in Field]?: Currency }
parsedAmounts: { [field in Field]?: CurrencyAmount }
poolTokenPercentage?: Percent
onAdd: () => void
}) {
return (
<>
<RowBetween>
<TYPE.body>{currencies[Field.CURRENCY_A]?.symbol} Deposited</TYPE.body>
<RowFixed>
<CurrencyLogo currency={currencies[Field.CURRENCY_A]} style={{ marginRight: '8px' }} />
<TYPE.body>{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</TYPE.body>
</RowFixed>
</RowBetween>
<RowBetween>
<TYPE.body>{currencies[Field.CURRENCY_B]?.symbol} Deposited</TYPE.body>
<RowFixed>
<CurrencyLogo currency={currencies[Field.CURRENCY_B]} style={{ marginRight: '8px' }} />
<TYPE.body>{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</TYPE.body>
</RowFixed>
</RowBetween>
<RowBetween>
<TYPE.body>Rates</TYPE.body>
<TYPE.body>
{`1 ${currencies[Field.CURRENCY_A]?.symbol} = ${price?.toSignificant(4)} ${
currencies[Field.CURRENCY_B]?.symbol
}`}
</TYPE.body>
</RowBetween>
<RowBetween style={{ justifyContent: 'flex-end' }}>
<TYPE.body>
{`1 ${currencies[Field.CURRENCY_B]?.symbol} = ${price?.invert().toSignificant(4)} ${
currencies[Field.CURRENCY_A]?.symbol
}`}
</TYPE.body>
</RowBetween>
<RowBetween>
<TYPE.body>Share of Pool:</TYPE.body>
<TYPE.body>{noLiquidity ? '100' : poolTokenPercentage?.toSignificant(4)}%</TYPE.body>
</RowBetween>
<ButtonPrimary style={{ margin: '20px 0 0 0' }} onClick={onAdd}>
<Text fontWeight={500} fontSize={20}>
{noLiquidity ? 'Create Pool & Supply' : 'Confirm Supply'}
</Text>
</ButtonPrimary>
</>
)
}
src/pages/AddLiquidity/ConfirmContent.tsx deleted 100644 → 0
View file @ ee0db4f2
import React, { useState } from 'react'
import { ButtonPrimary } from '../../components/Button'
import { RowBetween, RowFixed } from '../../components/Row'
import CurrencyLogo from '../../components/CurrencyLogo'
import { Field } from '../../state/mint/actions'
import { TYPE, ExternalLink } from '../../theme'
import { AutoColumn } from 'components/Column'
import { OutlineCard, GreyCard, BlueCard } from 'components/Card'
import styled from 'styled-components'
import { Break } from 'components/earn/styled'
import useTheme from 'hooks/useTheme'
import { AlertOctagon } from 'react-feather'
import { ToggleWrapper, ToggleElement } from 'components/Toggle/MultiToggle'
import { useTranslation } from 'react-i18next'
import { Price, Currency, CurrencyAmount } from '@uniswap/sdk-core'
const Wrapper = styled(AutoColumn)`
padding: 1rem 0;
`
export function ConfirmContent({
currencies,
parsedAmounts,
onAdd,
}: {
noLiquidity?: boolean
price?: Price
currencies: { [field in Field]?: Currency }
parsedAmounts: { [field in Field]?: CurrencyAmount }
onAdd: () => void
}) {
const currencyA: Currency | undefined = currencies[Field.CURRENCY_A]
const currencyB: Currency | undefined = currencies[Field.CURRENCY_B]
const [rateCurrency, setRateCurrency] = useState<Currency | undefined>(currencyA)
const theme = useTheme()
const { t } = useTranslation()
return (
<Wrapper gap="lg">
<OutlineCard>
<AutoColumn gap="md">
<RowBetween>
<RowFixed>
<CurrencyLogo currency={currencyA} />
<TYPE.label ml="8px">{currencyA?.symbol}</TYPE.label>
</RowFixed>
<RowFixed>
<TYPE.label mr="8px">{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</TYPE.label>
<GreyCard padding="4px 8px" width="fit-content" borderRadius="12px">
<TYPE.darkGray>50%</TYPE.darkGray>
</GreyCard>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<CurrencyLogo currency={currencyB} />
<TYPE.label ml="8px">{currencyB?.symbol}</TYPE.label>
</RowFixed>
<RowFixed>
<TYPE.label mr="8px">{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</TYPE.label>
<GreyCard padding="4px 8px" borderRadius="12px" width="fit-content">
<TYPE.darkGray>50%</TYPE.darkGray>
</GreyCard>
</RowFixed>
</RowBetween>
<Break />
<RowBetween>
<TYPE.label>{t('feePool')}</TYPE.label>
<TYPE.label>0.6%</TYPE.label>
</RowBetween>
</AutoColumn>
</OutlineCard>
<BlueCard padding="12px">
<RowBetween>
<AlertOctagon stroke={theme.primary1} width={'90px'} />
<TYPE.blue ml="12px" fontSize="14px">
{t('rebalanceMessage')}
</TYPE.blue>
</RowBetween>
</BlueCard>
<OutlineCard padding="16px">
<AutoColumn gap="md">
<RowBetween>
<TYPE.label>Position Limits</TYPE.label>
{currencyA && currencyB && (
<ToggleWrapper width="80px">
<ToggleElement
fontSize="10px"
isActive={rateCurrency === currencyA}
onClick={() => setRateCurrency(currencyA)}
>
{currencyA?.symbol}
</ToggleElement>
<ToggleElement
fontSize="10px"
isActive={rateCurrency === currencyB}
onClick={() => setRateCurrency(currencyB)}
>
{currencyB?.symbol}
</ToggleElement>
</ToggleWrapper>
)}
</RowBetween>
<RowBetween>
<AutoColumn gap="2px">
<TYPE.darkGray>Lower Limit</TYPE.darkGray>
<TYPE.label fontSize="14px">1621.82</TYPE.label>
<GreyCard padding="4px" borderRadius="4px" mt="6px">
<RowFixed>
<CurrencyLogo currency={currencyA} size="12px" />
<TYPE.label fontSize="12px" ml="6px">
100%
</TYPE.label>
<TYPE.label fontSize="12px" ml="6px">
{currencyA?.symbol}
</TYPE.label>
</RowFixed>
</GreyCard>
</AutoColumn>
<AutoColumn gap="2px">
<TYPE.darkGray>Entry Price</TYPE.darkGray>
<TYPE.label fontSize="14px">1621.82</TYPE.label>
<GreyCard padding="4px" borderRadius="4px" mt="6px">
<TYPE.label fontSize="12px" ml="6px">
50%/50%
</TYPE.label>
</GreyCard>
</AutoColumn>
<AutoColumn gap="2px">
<TYPE.darkGray>Upper Limit</TYPE.darkGray>
<TYPE.label fontSize="14px">1621.82</TYPE.label>
<GreyCard padding="4px" borderRadius="4px" mt="6px">
<RowFixed>
<CurrencyLogo currency={currencyB} size="12px" />
<TYPE.label fontSize="12px" ml="6px">
100%
</TYPE.label>
<TYPE.label fontSize="12px" ml="6px">
{currencyB?.symbol}
</TYPE.label>
</RowFixed>
</GreyCard>
</AutoColumn>
</RowBetween>
</AutoColumn>
</OutlineCard>
<TYPE.main>
{t('addEarnHelper')}
<ExternalLink href="">{t('learnMoreAboutFess')}</ExternalLink>
</TYPE.main>
<ButtonPrimary onClick={onAdd} fontSize="20px">
{t('addLiquidity')}
</ButtonPrimary>
</Wrapper>
)
}
export default ConfirmContent
src/pages/AddLiquidity/Review.tsx
View file @ 807860aa
......@@ -12,8 +12,7 @@ import { PositionPreview } from 'components/PositionPreview'
import { RangeBadge } from './styled'
const Wrapper = styled.div`
padding: 20px;
min-width: 460px;
padding-top: 20px;
`
export const Badge = styled(Card)<{ inRange?: boolean }>`
......
src/pages/AddLiquidity/index.tsx
View file @ 807860aa
......@@ -2,7 +2,7 @@ import { TransactionResponse } from '@ethersproject/providers'
import { Currency, TokenAmount, ETHER } from '@uniswap/sdk-core'
import React, { useCallback, useContext, useMemo, useState } from 'react'
import { WETH9 } from '@uniswap/sdk-core'
import { Link2, AlertTriangle, ChevronRight } from 'react-feather'
import { Link2, AlertTriangle } from 'react-feather'
import ReactGA from 'react-ga'
import { useV3NFTPositionManagerContract } from '../../hooks/useContract'
import { RouteComponentProps } from 'react-router-dom'
......@@ -11,9 +11,9 @@ 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 { TransactionSubmittedContent, ConfirmationPendingContent } from '../../components/TransactionConfirmationModal'
import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
import CurrencyInputPanel from '../../components/CurrencyInputPanel'
import { AutoRow, RowBetween, RowFixed } from '../../components/Row'
import { RowBetween, RowFixed } from '../../components/Row'
import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
import Review from './Review'
import { useActiveWeb3React } from '../../hooks'
......@@ -36,7 +36,6 @@ import {
CurrencyDropdown,
ScrollableContent,
StyledInput,
FixedPreview,
Wrapper,
RangeBadge,
ScrollablePage,
......@@ -54,6 +53,7 @@ import RangeSelector from 'components/RangeSelector'
import RateToggle from 'components/RateToggle'
import { BigNumber } from '@ethersproject/bignumber'
import { calculateGasMargin } from 'utils'
import { AddRemoveTabs } from 'components/NavigationTabs'
export default function AddLiquidity({
match: {
......@@ -305,8 +305,6 @@ export default function AddLiquidity({
setTxHash('')
}, [onFieldAInput, txHash])
// const isCreate = history.location.pathname.includes('/create')
const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
const clearAll = useCallback(() => {
......@@ -332,137 +330,140 @@ export default function AddLiquidity({
return (
<ScrollablePage>
<ScrollableContent>
<AutoRow gap="2px" marginBottom="20px">
<ButtonText opacity={'0.4'} onClick={() => history.push('/pool')}>
Pool
</ButtonText>
<ChevronRight size={16} opacity={'0.4'} />
<ButtonText opacity={showConfirm ? '0.4' : '1'} onClick={() => (showConfirm ? setShowConfirm(false) : null)}>
Configure
</ButtonText>
<ChevronRight size={16} opacity={'0.4'} />
<ButtonText
opacity={showConfirm ? '1' : '0.1'}
onClick={() => (!showConfirm ? setShowConfirm(true) : null)}
disabled={!isValid}
>
Review
</ButtonText>
</AutoRow>
{showConfirm ? (
<AppBody>
<Review
currencies={currencies}
parsedAmounts={parsedAmounts}
position={position}
existingPosition={existingPosition}
priceLower={priceLower}
priceUpper={priceUpper}
outOfRange={outOfRange}
<TransactionConfirmationModal
isOpen={showConfirm}
onDismiss={handleDismissConfirmation}
attemptingTxn={attemptingTxn}
hash={txHash}
content={() => (
<ConfirmationModalContent
title={'Add Liquidity'}
onDismiss={handleDismissConfirmation}
topContent={() => (
<Review
currencies={currencies}
parsedAmounts={parsedAmounts}
position={position}
existingPosition={existingPosition}
priceLower={priceLower}
priceUpper={priceUpper}
outOfRange={outOfRange}
/>
)}
bottomContent={() => (
<ButtonPrimary onClick={onAdd}>
<Text fontWeight={500} fontSize={20}>
Add
</Text>
</ButtonPrimary>
)}
/>
</AppBody>
) : (
<AppBody>
<Wrapper>
<AutoColumn gap="lg">
{!hasExistingPosition ? (
<>
<AutoColumn gap="md">
<RowBetween paddingBottom="20px">
<TYPE.label>Select a pair</TYPE.label>
<ButtonText onClick={clearAll}>
<TYPE.blue fontSize="12px">Clear All</TYPE.blue>
</ButtonText>
</RowBetween>
<RowBetween>
<CurrencyDropdown
value={formattedAmounts[Field.CURRENCY_A]}
onUserInput={onFieldAInput}
hideInput={true}
onMax={() => {
onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
}}
onCurrencySelect={handleCurrencyASelect}
showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
currency={currencies[Field.CURRENCY_A]}
id="add-liquidity-input-tokena"
showCommonBases
/>
<CurrencyDropdown
value={formattedAmounts[Field.CURRENCY_B]}
hideInput={true}
onUserInput={onFieldBInput}
onCurrencySelect={handleCurrencyBSelect}
onMax={() => {
onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
}}
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
currency={currencies[Field.CURRENCY_B]}
id="add-liquidity-input-tokenb"
showCommonBases
/>
</RowBetween>
</AutoColumn>{' '}
</>
) : (
<RowBetween>
<RowFixed>
<DoubleCurrencyLogo
currency0={baseCurrency ?? undefined}
currency1={quoteCurrency ?? undefined}
size={24}
margin={true}
)}
pendingText={pendingText}
/>
<AppBody>
<AddRemoveTabs creating={false} adding={true} />
<Wrapper>
<AutoColumn gap="lg">
{!hasExistingPosition ? (
<>
<AutoColumn gap="md">
<RowBetween paddingBottom="20px">
<TYPE.label>Select a pair</TYPE.label>
<ButtonText onClick={clearAll}>
<TYPE.blue fontSize="12px">Clear All</TYPE.blue>
</ButtonText>
</RowBetween>
<RowBetween>
<CurrencyDropdown
value={formattedAmounts[Field.CURRENCY_A]}
onUserInput={onFieldAInput}
hideInput={true}
onMax={() => {
onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
}}
onCurrencySelect={handleCurrencyASelect}
showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
currency={currencies[Field.CURRENCY_A]}
id="add-liquidity-input-tokena"
showCommonBases
/>
<TYPE.label ml="10px" fontSize="24px">
{quoteCurrency?.symbol} / {baseCurrency?.symbol}
</TYPE.label>
</RowFixed>
<RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
</RowBetween>
)}
{hasExistingPosition && existingPosition ? (
<PositionPreview position={existingPosition} title={'Current Position'} />
) : (
<>
<FeeSelector
disabled={!currencyB || !currencyA}
feeAmount={feeAmount}
handleFeePoolSelect={handleFeePoolSelect}
<CurrencyDropdown
value={formattedAmounts[Field.CURRENCY_B]}
hideInput={true}
onUserInput={onFieldBInput}
onCurrencySelect={handleCurrencyBSelect}
onMax={() => {
onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
}}
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
currency={currencies[Field.CURRENCY_B]}
id="add-liquidity-input-tokenb"
showCommonBases
/>
</RowBetween>
</AutoColumn>{' '}
</>
) : (
<RowBetween>
<RowFixed>
<DoubleCurrencyLogo
currency0={currencyA ?? undefined}
currency1={currencyB ?? undefined}
size={24}
margin={true}
/>
{noLiquidity && (
<DynamicSection disabled={!currencyA || !currencyB}>
<AutoColumn gap="md">
<BlueCard width="100%" padding="1rem">
You are the first to provide liquidity to this pool.
</BlueCard>
<RowBetween>
<TYPE.label>{t('selectStartingPrice')}</TYPE.label>
{baseCurrency && quoteCurrency ? (
<RateToggle
currencyA={baseCurrency}
currencyB={quoteCurrency}
handleRateToggle={() => {
onLeftRangeInput('')
onRightRangeInput('')
setBaseCurrency(quoteCurrency)
}}
/>
) : null}
</RowBetween>
<OutlineCard padding="12px">
<StyledInput
className="start-price-input"
value={startPriceTypedValue}
onUserInput={onStartPriceInput}
<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'} />
) : (
<>
<FeeSelector
disabled={!currencyB || !currencyA}
feeAmount={feeAmount}
handleFeePoolSelect={handleFeePoolSelect}
/>
{noLiquidity && (
<DynamicSection disabled={!currencyA || !currencyB}>
<AutoColumn gap="md">
<BlueCard width="100%" padding="1rem">
You are the first to provide liquidity to this pool.
</BlueCard>
<RowBetween>
<TYPE.label>{t('selectStartingPrice')}</TYPE.label>
{baseCurrency && quoteCurrency ? (
<RateToggle
currencyA={baseCurrency}
currencyB={quoteCurrency}
handleRateToggle={() => {
onLeftRangeInput('')
onRightRangeInput('')
setBaseCurrency(quoteCurrency)
}}
/>
</OutlineCard>
<RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
<TYPE.main>Starting {baseCurrency?.symbol} Price:</TYPE.main>
) : null}
</RowBetween>
<OutlineCard padding="12px">
<StyledInput
className="start-price-input"
value={startPriceTypedValue}
onUserInput={onStartPriceInput}
/>
</OutlineCard>
<RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
<TYPE.main>Current {baseCurrency?.symbol} Price:</TYPE.main>
<TYPE.main>
{price ? (
<TYPE.main>
{invertPrice ? price?.invert()?.toSignificant(8) : price?.toSignificant(8)}{' '}
......@@ -471,151 +472,119 @@ export default function AddLiquidity({
) : (
'-'
)}
</RowBetween>
</AutoColumn>
</DynamicSection>
)}
<DynamicSection
gap="md"
disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}
>
<RowBetween>
<TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
{baseCurrency && quoteCurrency ? (
<RateToggle
currencyA={baseCurrency}
currencyB={quoteCurrency}
handleRateToggle={() => {
onLeftRangeInput('')
onRightRangeInput('')
setBaseCurrency(quoteCurrency)
}}
/>
) : null}
</RowBetween>
{price && baseCurrency && quoteCurrency && !noLiquidity && (
<RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
<TYPE.main>Current {baseCurrency?.symbol} Price:</TYPE.main>
<TYPE.main>
{invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)}{' '}
{quoteCurrency?.symbol}
</TYPE.main>
</RowBetween>
)}
<RangeSelector
priceLower={priceLower}
priceUpper={priceUpper}
getDecrementLower={getDecrementLower}
getIncrementLower={getIncrementLower}
getDecrementUpper={getDecrementUpper}
getIncrementUpper={getIncrementUpper}
onLeftRangeInput={onLeftRangeInput}
onRightRangeInput={onRightRangeInput}
currencyA={baseCurrency}
currencyB={quoteCurrency}
feeAmount={feeAmount}
/>
{outOfRange ? (
<YellowCard padding="8px 12px" borderRadius="12px">
<RowBetween>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<TYPE.yellow ml="12px" fontSize="12px">
{t('inactiveRangeWarning')}
</TYPE.yellow>
</RowBetween>
</YellowCard>
) : null}
{invalidRange ? (
<YellowCard padding="8px 12px" borderRadius="12px">
<RowBetween>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<TYPE.yellow ml="12px" fontSize="12px">
{t('invalidRangeWarning')}
</TYPE.yellow>
</RowBetween>
</YellowCard>
) : null}
</AutoColumn>
</DynamicSection>
</>
)}
<DynamicSection
disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange}
>
<AutoColumn gap="md">
<TYPE.label>{hasExistingPosition ? 'Add more liquidity' : t('depositAmounts')}</TYPE.label>
)}
<DynamicSection
gap="md"
disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}
>
<RowBetween>
<TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
{baseCurrency && quoteCurrency ? (
<RateToggle
currencyA={baseCurrency}
currencyB={quoteCurrency}
handleRateToggle={() => {
onLeftRangeInput('')
onRightRangeInput('')
setBaseCurrency(quoteCurrency)
}}
/>
) : 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>
)}
<CurrencyInputPanel
value={formattedAmounts[Field.CURRENCY_A]}
onUserInput={onFieldAInput}
onMax={() => {
onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
}}
onCurrencySelect={handleCurrencyASelect}
showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
currency={currencies[Field.CURRENCY_A]}
id="add-liquidity-input-tokena"
showCommonBases
locked={depositADisabled}
<RangeSelector
priceLower={priceLower}
priceUpper={priceUpper}
getDecrementLower={getDecrementLower}
getIncrementLower={getIncrementLower}
getDecrementUpper={getDecrementUpper}
getIncrementUpper={getIncrementUpper}
onLeftRangeInput={onLeftRangeInput}
onRightRangeInput={onRightRangeInput}
currencyA={baseCurrency}
currencyB={quoteCurrency}
feeAmount={feeAmount}
/>
<ColumnCenter>
<Link2 stroke={theme.text2} size={'24px'} />
</ColumnCenter>
{outOfRange ? (
<YellowCard padding="8px 12px" borderRadius="12px">
<RowBetween>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<TYPE.yellow ml="12px" fontSize="12px">
{t('inactiveRangeWarning')}
</TYPE.yellow>
</RowBetween>
</YellowCard>
) : null}
<CurrencyInputPanel
value={formattedAmounts[Field.CURRENCY_B]}
onUserInput={onFieldBInput}
onCurrencySelect={handleCurrencyBSelect}
onMax={() => {
onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
}}
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
currency={currencies[Field.CURRENCY_B]}
id="add-liquidity-input-tokenb"
showCommonBases
locked={depositBDisabled}
/>
</AutoColumn>
</DynamicSection>
</AutoColumn>
</Wrapper>
</AppBody>
)}
</ScrollableContent>
{addIsUnsupported && (
<UnsupportedCurrencyFooter
show={addIsUnsupported}
currencies={[currencies.CURRENCY_A, currencies.CURRENCY_B]}
/>
)}
<FixedPreview>
{attemptingTxn ? (
<ConfirmationPendingContent onDismiss={handleDismissConfirmation} pendingText={pendingText} inline={true} />
) : txHash && chainId ? (
<TransactionSubmittedContent
chainId={chainId}
hash={txHash}
onDismiss={handleDismissConfirmation}
inline={true}
/>
) : (
<AutoColumn gap="md">
<TYPE.label fontSize="16px">{showConfirm ? 'Review and submit' : 'Configure Position'}</TYPE.label>
{/* <TYPE.main fontWeight={400} fontSize="14px">
Learn more about Uniswap V3 liquidity pools.
</TYPE.main> */}
{noLiquidity && (
<BlueCard width="100%" padding="1rem">
You are the first to provide liquidity to this pool.
</BlueCard>
)}
{showConfirm ? (
{invalidRange ? (
<YellowCard padding="8px 12px" borderRadius="12px">
<RowBetween>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<TYPE.yellow ml="12px" fontSize="12px">
{t('invalidRangeWarning')}
</TYPE.yellow>
</RowBetween>
</YellowCard>
) : null}
</DynamicSection>
</>
)}
<DynamicSection
disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange}
>
<AutoColumn gap="md">
<TYPE.label>{hasExistingPosition ? 'Add more liquidity' : t('depositAmounts')}</TYPE.label>
<CurrencyInputPanel
value={formattedAmounts[Field.CURRENCY_A]}
onUserInput={onFieldAInput}
onMax={() => {
onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
}}
onCurrencySelect={handleCurrencyASelect}
showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
currency={currencies[Field.CURRENCY_A]}
id="add-liquidity-input-tokena"
showCommonBases
locked={depositADisabled}
/>
<ColumnCenter>
<Link2 stroke={theme.text2} size={'24px'} />
</ColumnCenter>
<CurrencyInputPanel
value={formattedAmounts[Field.CURRENCY_B]}
onUserInput={onFieldBInput}
onCurrencySelect={handleCurrencyBSelect}
onMax={() => {
onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
}}
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
currency={currencies[Field.CURRENCY_B]}
id="add-liquidity-input-tokenb"
showCommonBases
locked={depositBDisabled}
/>
</AutoColumn>
</DynamicSection>
<div>
{addIsUnsupported ? (
<ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}>
......@@ -667,10 +636,8 @@ export default function AddLiquidity({
)}
<ButtonError
onClick={() => {
onAdd()
expertMode ? onAdd() : setShowConfirm(true)
}}
style={{ borderRadius: '12px' }}
padding={'12px'}
disabled={
!isValid ||
(approvalA !== ApprovalState.APPROVED && !depositADisabled) ||
......@@ -678,29 +645,22 @@ export default function AddLiquidity({
}
error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
>
<Text fontWeight={500}>
{errorMessage ? errorMessage : noLiquidity ? 'Create Pool and Add' : 'Add'}
</Text>
<Text fontWeight={500}>{errorMessage ? errorMessage : 'Add'}</Text>
</ButtonError>
</AutoColumn>
)}
</div>
) : (
<ButtonError
onClick={() => {
expertMode ? onAdd() : setShowConfirm(true)
}}
style={{ borderRadius: '12px' }}
padding={'12px'}
disabled={!isValid}
error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
>
<Text fontWeight={500}>{errorMessage ?? 'Review'}</Text>
</ButtonError>
)}
</AutoColumn>
)}
</FixedPreview>
</AutoColumn>
</Wrapper>
</AppBody>
{/* )} */}
</ScrollableContent>
{addIsUnsupported && (
<UnsupportedCurrencyFooter
show={addIsUnsupported}
currencies={[currencies.CURRENCY_A, currencies.CURRENCY_B]}
/>
)}
</ScrollablePage>
)
}
src/pages/RemoveLiquidity/V3.tsx
View file @ 807860aa
import React, { useCallback, useMemo, useState } from 'react'
import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
import { Redirect, RouteComponentProps, Link } from 'react-router-dom'
import { Redirect, RouteComponentProps } from 'react-router-dom'
import AppBody from '../AppBody'
import { BigNumber } from '@ethersproject/bignumber'
import useDebouncedChangeHandler from 'hooks/useDebouncedChangeHandler'
import { useBurnV3ActionHandlers, useBurnV3State, useDerivedV3BurnInfo } from 'state/burn/v3/hooks'
import Slider from 'components/Slider'
import { AutoRow, RowBetween, RowFixed } from 'components/Row'
import TransactionConfirmationModal from '../../components/TransactionConfirmationModal'
import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
import { AutoColumn } from 'components/Column'
import { ButtonConfirmed, ButtonText } from 'components/Button'
import { ButtonConfirmed, ButtonPrimary } from 'components/Button'
import { LightCard } from 'components/Card'
import { Text } from 'rebass'
import CurrencyLogo from 'components/CurrencyLogo'
......@@ -23,7 +23,6 @@ import { TransactionResponse } from '@ethersproject/providers'
import { useTransactionAdder } from 'state/transactions/hooks'
import { WETH9, CurrencyAmount } from '@uniswap/sdk-core'
import { TYPE } from 'theme'
import styled from 'styled-components'
import { Wrapper, SmallMaxButton } from './styled'
import Loader from 'components/Loader'
import { useToken } from 'hooks/Tokens'
......@@ -33,13 +32,11 @@ import { RangeBadge } from 'pages/AddLiquidity/styled'
import { Break } from 'components/earn/styled'
import { NonfungiblePositionManager } from '@uniswap/v3-sdk'
import { calculateGasMargin } from 'utils'
import useTheme from 'hooks/useTheme'
import { AddRemoveTabs } from 'components/NavigationTabs'
export const UINT128MAX = BigNumber.from(2).pow(128).sub(1)
const UnstyledLink = styled(Link)`
text-decoration: none;
`
// redirect invalid tokenIds
export default function RemoveLiquidityV3({
location,
......@@ -63,7 +60,7 @@ export default function RemoveLiquidityV3({
}
function Remove({ tokenId }: { tokenId: BigNumber }) {
const { position } = useV3PositionFromTokenId(tokenId)
const theme = useTheme()
const { account, chainId, library } = useActiveWeb3React()
// currencies from position
......@@ -98,7 +95,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
const addTransaction = useTransactionAdder()
const positionManager = useV3NFTPositionManagerContract()
const burn = useCallback(async () => {
setShowConfirm(true)
setAttemptingTxn(true)
if (
!positionManager ||
......@@ -113,7 +109,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
!liquidityPercentage ||
!library
) {
setShowConfirm(false)
return
}
......@@ -165,7 +160,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
})
})
.catch((error) => {
setShowConfirm(false)
setAttemptingTxn(false)
console.error(error)
})
......@@ -200,6 +194,67 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
currency0?.symbol
} and ${liquidityValue1?.toSignificant(6)} ${currency1?.symbol}`
function modalHeader() {
return (
<AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
<RowBetween align="flex-end">
<Text fontSize={16} fontWeight={500}>
{currency0?.symbol}:
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
{liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
</RowFixed>
</RowBetween>
<RowBetween align="flex-end">
<Text fontSize={16} fontWeight={500}>
{currency1?.symbol}:
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
{liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
</RowFixed>
</RowBetween>
{feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) ? (
<>
<TYPE.italic fontSize={12} color={theme.text2} textAlign="left" padding={'8px 0 0 0'}>
{`You will also collect fees earned from this position.`}
</TYPE.italic>
<RowBetween>
<Text fontSize={16} fontWeight={500}>
{currency0?.symbol} from fees:
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
{feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
</RowFixed>
</RowBetween>
<RowBetween>
<Text fontSize={16} fontWeight={500}>
{currency1?.symbol} from fees:
</Text>
<RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
{feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />}
</Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
</RowFixed>
</RowBetween>
</>
) : null}
<ButtonPrimary mt="16px" onClick={burn}>
Remove
</ButtonPrimary>
</AutoColumn>
)
}
return (
<AutoColumn>
<TransactionConfirmationModal
......@@ -207,19 +262,17 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
onDismiss={handleDismissConfirmation}
attemptingTxn={attemptingTxn}
hash={txnHash ?? ''}
content={() => <div />}
content={() => (
<ConfirmationModalContent
title={'Remove Liquidity'}
onDismiss={handleDismissConfirmation}
topContent={modalHeader}
/>
)}
pendingText={pendingText}
/>
<AutoRow marginBottom="20px">
<UnstyledLink to="pool">
<ButtonText opacity={'0.4'}>Pool</ButtonText>
</UnstyledLink>
<TYPE.label margin="0 10px" opacity={'0.4'}>
{' > '}
</TYPE.label>
<TYPE.label>Remove Liquidity</TYPE.label>
</AutoRow>
<AppBody>
<AddRemoveTabs creating={false} adding={false} />
<Wrapper>
{position ? (
<AutoColumn gap="lg">
......@@ -308,8 +361,12 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
</LightCard>
<div style={{ display: 'flex' }}>
<AutoColumn gap="12px" style={{ flex: '1' }}>
<ButtonConfirmed confirmed={false} disabled={percent === 0 || !liquidityValue0} onClick={burn}>
{error ?? 'Remove Liquidity'}
<ButtonConfirmed
confirmed={false}
disabled={percent === 0 || !liquidityValue0}
onClick={() => setShowConfirm(true)}
>
{error ?? 'Remove'}
</ButtonConfirmed>
</AutoColumn>
</div>
......
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