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
Show 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 { TransactionResponse } from '@ethersproject/providers'
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 { ZERO_PERCENT } from '../../constants/misc'
import { NONFUNGIBLE_POSITION_MANAGER_ADDRESSES } from '../../constants/addresses'
......@@ -71,6 +71,7 @@ import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
import LiquidityChartRangeInput from 'components/LiquidityChartRangeInput'
import { SupportedChainId } from 'constants/chains'
import OptimismDowntimeWarning from 'components/OptimismDowntimeWarning'
import { CHAIN_INFO } from '../../constants/chains'
const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
......@@ -243,7 +244,7 @@ export default function AddLiquidity({
addTransaction(response, {
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({
category: 'Liquidity',
action: 'Create',
......@@ -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(
(currencyNew: Currency, currencyIdOther?: string): (string | undefined)[] => {
const currencyIdNew = currencyId(currencyNew)
......@@ -425,15 +420,22 @@ export default function AddLiquidity({
[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(() => {
setShowConfirm(false)
// if there was a tx hash, we want to clear the input
if (txHash) {
onFieldAInput('')
// dont jump to pool page if creating
if (!mustCreateSeparately) {
history.push('/pool')
}
}
setTxHash('')
}, [history, onFieldAInput, txHash])
}, [history, mustCreateSeparately, onFieldAInput, txHash])
const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
......@@ -458,6 +460,16 @@ export default function AddLiquidity({
const showApprovalB =
!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 = () =>
addIsUnsupported ? (
<ButtonPrimary disabled={true} $borderRadius="12px" padding={'12px'}>
......@@ -510,10 +522,14 @@ export default function AddLiquidity({
</RowBetween>
)}
{mustCreateSeparately && (
<ButtonError onClick={onCreate}>
<Text fontWeight={500}>
<Trans>Create</Trans>
</Text>
<ButtonError onClick={onCreate} disabled={!isValid || attemptingTxn || !position}>
{attemptingTxn ? (
<Dots>
<Trans>Confirm Create</Trans>
</Dots>
) : (
<Text fontWeight={500}>{errorMessage ? { errorMessage } : <Trans>Create</Trans>}</Text>
)}
</ButtonError>
)}
<ButtonError
......@@ -528,13 +544,12 @@ export default function AddLiquidity({
}
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>
</AutoColumn>
)
// flag for whether pool creation must be a separate tx
const mustCreateSeparately =
noLiquidity && (chainId === SupportedChainId.OPTIMISM || chainId === SupportedChainId.OPTIMISTIC_KOVAN)
return (
<>
......@@ -548,7 +563,7 @@ export default function AddLiquidity({
hash={txHash}
content={() => (
<ConfirmationModalContent
title={'Add Liquidity'}
title={t`Add Liquidity`}
onDismiss={handleDismissConfirmation}
topContent={() => (
<Review
......@@ -657,7 +672,6 @@ export default function AddLiquidity({
</AutoColumn>{' '}
</>
)}
{hasExistingPosition && existingPosition && (
<PositionPreview
position={existingPosition}
......@@ -667,7 +681,6 @@ export default function AddLiquidity({
/>
)}
</AutoColumn>
<div>
<DynamicSection
disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange}
......@@ -764,7 +777,37 @@ export default function AddLiquidity({
<Trans>Set Starting Price</Trans>
</TYPE.label>
</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">
<StyledInput
className="start-price-input"
......@@ -803,6 +846,11 @@ export default function AddLiquidity({
<StackedContainer>
<StackedItem style={{ opacity: showCapitalEfficiencyWarning ? '0.05' : 1 }}>
<AutoColumn gap="md">
<RowBetween>
<TYPE.label>
<Trans>Set Price Range</Trans>
</TYPE.label>
</RowBetween>
<RangeSelector
priceLower={priceLower}
priceUpper={priceUpper}
......@@ -860,7 +908,6 @@ export default function AddLiquidity({
width="auto"
onClick={() => {
setShowCapitalEfficiencyWarning(false)
getSetFullRange()
}}
>
......@@ -901,32 +948,6 @@ export default function AddLiquidity({
) : null}
</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>
<Buttons />
</MediumOnly>
......
src/pages/AddLiquidity/styled.tsx
View file @ 55bbaffe
......@@ -20,7 +20,7 @@ export const Wrapper = styled.div`
padding: 26px 16px;
min-width: 480px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.mediaWidth.upToMedium`
min-width: 400px;
`};
......@@ -40,7 +40,7 @@ export const ScrollablePage = styled.div`
`
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')};
`
......
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