fix: init pool behavior (#7052)

* Disable increment/decrement  when range prices undefined

* Enable full-range price selection for new pools

* Add cypress tests

* Fix lint error
This commit is contained in:
gnewfield 2023-08-03 10:52:18 -04:00 committed by GitHub
parent b8573930b9
commit 24d00f7c39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 8 deletions

@ -52,4 +52,51 @@ describe('Add Liquidity', () => {
cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '40% select')
})
})
it('disables increment and decrement until initial prices are inputted', () => {
// ETH / BITCOIN pool (0.05% tier not created)
cy.visit('/add/ETH/0x72e4f9F808C49A2a61dE9C5896298920Dc4EEEa9/500')
// Set starting price in order to enable price range step counters
cy.get('.start-price-input').type('1000')
// Min Price increment / decrement buttons should be disabled
cy.get('[data-testid="increment-price-range"]').eq(0).should('be.disabled')
cy.get('[data-testid="decrement-price-range"]').eq(0).should('be.disabled')
// Enter min price, which should enable the buttons
cy.get('.rate-input-0').eq(0).type('900').blur()
cy.get('[data-testid="increment-price-range"]').eq(0).should('not.be.disabled')
cy.get('[data-testid="decrement-price-range"]').eq(0).should('not.be.disabled')
// Repeat for Max Price step counter
cy.get('[data-testid="increment-price-range"]').eq(1).should('be.disabled')
cy.get('[data-testid="decrement-price-range"]').eq(1).should('be.disabled')
// Enter max price, which should enable the buttons
cy.get('.rate-input-0').eq(1).type('1100').blur()
cy.get('[data-testid="increment-price-range"]').eq(1).should('not.be.disabled')
cy.get('[data-testid="decrement-price-range"]').eq(1).should('not.be.disabled')
})
it('allows full range selection on new pool creation', () => {
// ETH / BITCOIN pool (0.05% tier not created)
cy.visit('/add/ETH/0x72e4f9F808C49A2a61dE9C5896298920Dc4EEEa9/500')
// Set starting price in order to enable price range step counters
cy.get('.start-price-input').type('1000')
cy.get('[data-testid="set-full-range"]').click()
// Check that the min price is 0 and the max price is infinity
cy.get('.rate-input-0').eq(0).should('have.value', '0')
cy.get('.rate-input-0').eq(1).should('have.value', '∞')
// Increment and decrement buttons are disabled when full range is selected
cy.get('[data-testid="increment-price-range"]').eq(0).should('be.disabled')
cy.get('[data-testid="decrement-price-range"]').eq(0).should('be.disabled')
cy.get('[data-testid="increment-price-range"]').eq(1).should('be.disabled')
cy.get('[data-testid="decrement-price-range"]').eq(1).should('be.disabled')
// Check that url params were added
cy.url().then((url) => {
const params = new URLSearchParams(url)
const minPrice = params.get('minPrice')
const maxPrice = params.get('maxPrice')
// Note: although 0 and ∞ displayed, actual values in query are ticks at limit
return minPrice && maxPrice && parseFloat(minPrice) < parseFloat(maxPrice)
})
})
})

@ -149,7 +149,7 @@ const StepCounter = ({
<InputRow>
{!locked && (
<SmallButton onClick={handleDecrement} disabled={decrementDisabled}>
<SmallButton data-testid="decrement-price-range" onClick={handleDecrement} disabled={decrementDisabled}>
<ButtonLabel disabled={decrementDisabled} fontSize="12px">
<Minus size={18} />
</ButtonLabel>
@ -167,7 +167,7 @@ const StepCounter = ({
/>
{!locked && (
<SmallButton onClick={handleIncrement} disabled={incrementDisabled}>
<SmallButton data-testid="increment-price-range" onClick={handleIncrement} disabled={incrementDisabled}>
<ButtonLabel disabled={incrementDisabled} fontSize="12px">
<Plus size={18} />
</ButtonLabel>

@ -19,7 +19,7 @@ interface PresetsButtonsProps {
export default function PresetsButtons({ onSetFullRange }: PresetsButtonsProps) {
return (
<AutoRow gap="4px" width="auto">
<Button onClick={onSetFullRange}>
<Button data-testid="set-full-range" onClick={onSetFullRange}>
<ThemedText.DeprecatedBody fontSize={12}>
<Trans>Full Range</Trans>
</ThemedText.DeprecatedBody>

@ -49,8 +49,8 @@ export default function RangeSelector({
width="48%"
decrement={isSorted ? getDecrementLower : getIncrementUpper}
increment={isSorted ? getIncrementLower : getDecrementUpper}
decrementDisabled={ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
incrementDisabled={ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
decrementDisabled={leftPrice === undefined || ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
incrementDisabled={leftPrice === undefined || ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
feeAmount={feeAmount}
label={leftPrice ? `${currencyB?.symbol}` : '-'}
title={<Trans>Min Price</Trans>}
@ -63,8 +63,8 @@ export default function RangeSelector({
width="48%"
decrement={isSorted ? getDecrementUpper : getIncrementLower}
increment={isSorted ? getIncrementUpper : getDecrementLower}
incrementDisabled={ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
decrementDisabled={ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
incrementDisabled={rightPrice === undefined || ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
decrementDisabled={rightPrice === undefined || ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
feeAmount={feeAmount}
label={rightPrice ? `${currencyB?.symbol}` : '-'}
tokenA={currencyA?.symbol}

@ -888,7 +888,7 @@ function AddLiquidity() {
feeAmount={feeAmount}
ticksAtLimit={ticksAtLimit}
/>
{!noLiquidity && <PresetsButtons onSetFullRange={handleSetFullRange} />}
<PresetsButtons onSetFullRange={handleSetFullRange} />
</AutoColumn>
</StackedItem>
</StackedContainer>