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

cypress/e2e/add-liquidity.test.ts

@@ -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)
+    })
+  })
 })

src/components/InputStepCounter/InputStepCounter.tsx

@@ -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>

src/components/RangeSelector/PresetsButtons.tsx

@@ -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>

src/components/RangeSelector/index.tsx

@@ -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}

src/pages/AddLiquidity/index.tsx

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