Skip to content

I
interface
Commit 55bbaffe authored by Ian Lapham's avatar Ian Lapham Committed by GitHub
Browse files
Options

fix: support for isolated pool creation (#2029) 

* revert to remove ui polish changes

* left align blurb and fix bp issue

* fix translation wrapper

* remove preview screen for create, hide submitted txn UI for create, copy updates

* small fixes

* copy updates for create blurb

* add set price range title

* add translation

* fix some translations
Co-authored-by: default avatarJustin Domingue <judo@uniswap.org>
parent e1c3ad8f
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 51 deletions
src/pages/AddLiquidity/index.tsx
View file @ 55bbaffe
import { useCallback, useContext, useEffect, useMemo, useState } from 'react' import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
import { TransactionResponse } from '@ethersproject/providers' import { TransactionResponse } from '@ethersproject/providers'
import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core' import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
import { AlertTriangle, AlertCircle } from 'react-feather' import { AlertTriangle } from 'react-feather'
import ReactGA from 'react-ga' import ReactGA from 'react-ga'
import { ZERO_PERCENT } from '../../constants/misc' import { ZERO_PERCENT } from '../../constants/misc'
import { NONFUNGIBLE_POSITION_MANAGER_ADDRESSES } from '../../constants/addresses' import { NONFUNGIBLE_POSITION_MANAGER_ADDRESSES } from '../../constants/addresses'
...@@ -71,6 +71,7 @@ import { SwitchLocaleLink } from 'components/SwitchLocaleLink' ...@@ -71,6 +71,7 @@ import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
import LiquidityChartRangeInput from 'components/LiquidityChartRangeInput' import LiquidityChartRangeInput from 'components/LiquidityChartRangeInput'
import { SupportedChainId } from 'constants/chains' import { SupportedChainId } from 'constants/chains'
import OptimismDowntimeWarning from 'components/OptimismDowntimeWarning' import OptimismDowntimeWarning from 'components/OptimismDowntimeWarning'
import { CHAIN_INFO } from '../../constants/chains'
const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000) const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
...@@ -243,7 +244,7 @@ export default function AddLiquidity({ ...@@ -243,7 +244,7 @@ export default function AddLiquidity({
addTransaction(response, { addTransaction(response, {
summary: t`Create ${currencyA?.symbol}/${currencyB?.symbol} V3 pool`, summary: t`Create ${currencyA?.symbol}/${currencyB?.symbol} V3 pool`,
}) })
setTxHash(response.hash) // dont set txn hash as we dont want submitted txn screen for create
ReactGA.event({ ReactGA.event({
category: 'Liquidity', category: 'Liquidity',
action: 'Create', action: 'Create',
...@@ -361,12 +362,6 @@ export default function AddLiquidity({ ...@@ -361,12 +362,6 @@ export default function AddLiquidity({
} }
} }
const pendingText = `Supplying ${!depositADisabled ? parsedAmounts[Field.CURRENCY_A]?.toSignificant(6) : ''} ${
!depositADisabled ? currencies[Field.CURRENCY_A]?.symbol : ''
} ${!outOfRange ? 'and' : ''} ${!depositBDisabled ? parsedAmounts[Field.CURRENCY_B]?.toSignificant(6) : ''} ${
!depositBDisabled ? currencies[Field.CURRENCY_B]?.symbol : ''
}`
const handleCurrencySelect = useCallback( const handleCurrencySelect = useCallback(
(currencyNew: Currency, currencyIdOther?: string): (string | undefined)[] => { (currencyNew: Currency, currencyIdOther?: string): (string | undefined)[] => {
const currencyIdNew = currencyId(currencyNew) const currencyIdNew = currencyId(currencyNew)
...@@ -425,15 +420,22 @@ export default function AddLiquidity({ ...@@ -425,15 +420,22 @@ export default function AddLiquidity({
[currencyIdA, currencyIdB, history, onLeftRangeInput, onRightRangeInput] [currencyIdA, currencyIdB, history, onLeftRangeInput, onRightRangeInput]
) )
// flag for whether pool creation must be a separate tx
const mustCreateSeparately =
noLiquidity && (chainId === SupportedChainId.OPTIMISM || chainId === SupportedChainId.OPTIMISTIC_KOVAN)
const handleDismissConfirmation = useCallback(() => { const handleDismissConfirmation = useCallback(() => {
setShowConfirm(false) setShowConfirm(false)
// if there was a tx hash, we want to clear the input // if there was a tx hash, we want to clear the input
if (txHash) { if (txHash) {
onFieldAInput('') onFieldAInput('')
history.push('/pool') // dont jump to pool page if creating
if (!mustCreateSeparately) {
history.push('/pool')
}
} }
setTxHash('') setTxHash('')
}, [history, onFieldAInput, txHash]) }, [history, mustCreateSeparately, onFieldAInput, txHash])
const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B) const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
...@@ -458,6 +460,16 @@ export default function AddLiquidity({ ...@@ -458,6 +460,16 @@ export default function AddLiquidity({
const showApprovalB = const showApprovalB =
!argentWalletContract && approvalB !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_B] !argentWalletContract && approvalB !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_B]
const pendingText = mustCreateSeparately
? `Creating ${currencies[Field.CURRENCY_A]?.symbol}/${currencies[Field.CURRENCY_B]?.symbol} ${
feeAmount ? feeAmount / 10000 : ''
}% Pool`
: `Supplying ${!depositADisabled ? parsedAmounts[Field.CURRENCY_A]?.toSignificant(6) : ''} ${
!depositADisabled ? currencies[Field.CURRENCY_A]?.symbol : ''
} ${!outOfRange ? 'and' : ''} ${!depositBDisabled ? parsedAmounts[Field.CURRENCY_B]?.toSignificant(6) : ''} ${
!depositBDisabled ? currencies[Field.CURRENCY_B]?.symbol : ''
}`
const Buttons = () => const Buttons = () =>
addIsUnsupported ? ( addIsUnsupported ? (
<ButtonPrimary disabled={true} $borderRadius="12px" padding={'12px'}> <ButtonPrimary disabled={true} $borderRadius="12px" padding={'12px'}>
...@@ -510,10 +522,14 @@ export default function AddLiquidity({ ...@@ -510,10 +522,14 @@ export default function AddLiquidity({
</RowBetween> </RowBetween>
)} )}
{mustCreateSeparately && ( {mustCreateSeparately && (
<ButtonError onClick={onCreate}> <ButtonError onClick={onCreate} disabled={!isValid || attemptingTxn || !position}>
<Text fontWeight={500}> {attemptingTxn ? (
<Trans>Create</Trans> <Dots>
</Text> <Trans>Confirm Create</Trans>
</Dots>
) : (
<Text fontWeight={500}>{errorMessage ? { errorMessage } : <Trans>Create</Trans>}</Text>
)}
</ButtonError> </ButtonError>
)} )}
<ButtonError <ButtonError
...@@ -528,13 +544,12 @@ export default function AddLiquidity({ ...@@ -528,13 +544,12 @@ export default function AddLiquidity({
} }
error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]} error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
> >
<Text fontWeight={500}>{errorMessage ? errorMessage : <Trans>Preview</Trans>}</Text> <Text fontWeight={500}>
{mustCreateSeparately ? <Trans>Add</Trans> : errorMessage ? errorMessage : <Trans>Preview</Trans>}
</Text>
</ButtonError> </ButtonError>
</AutoColumn> </AutoColumn>
) )
// flag for whether pool creation must be a separate tx
const mustCreateSeparately =
noLiquidity && (chainId === SupportedChainId.OPTIMISM || chainId === SupportedChainId.OPTIMISTIC_KOVAN)
return ( return (
<> <>
...@@ -548,7 +563,7 @@ export default function AddLiquidity({ ...@@ -548,7 +563,7 @@ export default function AddLiquidity({
hash={txHash} hash={txHash}
content={() => ( content={() => (
<ConfirmationModalContent <ConfirmationModalContent
title={'Add Liquidity'} title={t`Add Liquidity`}
onDismiss={handleDismissConfirmation} onDismiss={handleDismissConfirmation}
topContent={() => ( topContent={() => (
<Review <Review
...@@ -657,7 +672,6 @@ export default function AddLiquidity({ ...@@ -657,7 +672,6 @@ export default function AddLiquidity({
</AutoColumn>{' '} </AutoColumn>{' '}
</> </>
)} )}
{hasExistingPosition && existingPosition && ( {hasExistingPosition && existingPosition && (
<PositionPreview <PositionPreview
position={existingPosition} position={existingPosition}
...@@ -667,7 +681,6 @@ export default function AddLiquidity({ ...@@ -667,7 +681,6 @@ export default function AddLiquidity({
/> />
)} )}
</AutoColumn> </AutoColumn>
<div> <div>
<DynamicSection <DynamicSection
disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange} disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange}
...@@ -764,7 +777,37 @@ export default function AddLiquidity({ ...@@ -764,7 +777,37 @@ export default function AddLiquidity({
<Trans>Set Starting Price</Trans> <Trans>Set Starting Price</Trans>
</TYPE.label> </TYPE.label>
</RowBetween> </RowBetween>
{noLiquidity && (
<BlueCard
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: '1rem 1rem',
}}
>
<TYPE.body
fontSize={14}
style={{ fontWeight: 500 }}
textAlign="left"
color={theme.primaryText1}
>
{mustCreateSeparately ? (
<Trans>
{`This pool must be initialized on ${
chainId && CHAIN_INFO ? CHAIN_INFO[chainId].label : ''
} before you can add liquidity. To initialize, select a starting price for the pool. Then, enter your liquidity price range and deposit amount.`}
</Trans>
) : (
<Trans>
This pool must be initialized before you can add liquidity. To initialize, select a
starting price for the pool. Then, enter your liquidity price range and deposit
amount. Gas fees will be higher than usual due to the initialization transaction.
</Trans>
)}
</TYPE.body>
</BlueCard>
)}
<OutlineCard padding="12px"> <OutlineCard padding="12px">
<StyledInput <StyledInput
className="start-price-input" className="start-price-input"
...@@ -803,6 +846,11 @@ export default function AddLiquidity({ ...@@ -803,6 +846,11 @@ export default function AddLiquidity({
<StackedContainer> <StackedContainer>
<StackedItem style={{ opacity: showCapitalEfficiencyWarning ? '0.05' : 1 }}> <StackedItem style={{ opacity: showCapitalEfficiencyWarning ? '0.05' : 1 }}>
<AutoColumn gap="md"> <AutoColumn gap="md">
<RowBetween>
<TYPE.label>
<Trans>Set Price Range</Trans>
</TYPE.label>
</RowBetween>
<RangeSelector <RangeSelector
priceLower={priceLower} priceLower={priceLower}
priceUpper={priceUpper} priceUpper={priceUpper}
...@@ -860,7 +908,6 @@ export default function AddLiquidity({ ...@@ -860,7 +908,6 @@ export default function AddLiquidity({
width="auto" width="auto"
onClick={() => { onClick={() => {
setShowCapitalEfficiencyWarning(false) setShowCapitalEfficiencyWarning(false)
getSetFullRange() getSetFullRange()
}} }}
> >
...@@ -901,32 +948,6 @@ export default function AddLiquidity({ ...@@ -901,32 +948,6 @@ export default function AddLiquidity({
) : null} ) : null}
</DynamicSection> </DynamicSection>
{noLiquidity && (
<BlueCard
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: '1rem 1rem',
}}
>
<div style={{ marginRight: '12px', width: '30px', height: '30px' }}>
<AlertCircle color={theme.primaryText1} size={30} />
</div>
<TYPE.body
fontSize={14}
style={{ marginBottom: 8, fontWeight: 500 }}
textAlign="center"
color={theme.primaryText1}
>
<Trans>
You are the first liquidity provider for this Uniswap V3 pool.The transaction cost will be
much higher as it includes the gas to create the pool.
</Trans>
</TYPE.body>
</BlueCard>
)}
<MediumOnly> <MediumOnly>
<Buttons /> <Buttons />
</MediumOnly> </MediumOnly>
......
src/pages/AddLiquidity/styled.tsx
View file @ 55bbaffe
...@@ -20,7 +20,7 @@ export const Wrapper = styled.div` ...@@ -20,7 +20,7 @@ export const Wrapper = styled.div`
padding: 26px 16px; padding: 26px 16px;
min-width: 480px; min-width: 480px;
${({ theme }) => theme.mediaWidth.upToSmall` ${({ theme }) => theme.mediaWidth.upToMedium`
min-width: 400px; min-width: 400px;
`}; `};
...@@ -40,7 +40,7 @@ export const ScrollablePage = styled.div` ...@@ -40,7 +40,7 @@ export const ScrollablePage = styled.div`
` `
export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>` export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`
opacity: ${({ disabled }) => (disabled ? '0.3' : '1')}; opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};
pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')}; pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')};
` `
......
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