fix(earn): stabilize add liquidity price preset initialization on pool detail

Author: neikop

apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/components/PriceSection/RangePresetSelector.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import { HStack } from 'components/Stack'
 import useTheme from 'hooks/useTheme'
 
-import { FULL_PRICE_RANGE, getRangePresetOptions } from './utils'
+import { FULL_PRICE_RANGE, getDefaultRangePreset, getRangePresetOptions } from './utils'
 
 const RangeButton = styled.button<{ $active: boolean }>`
   flex: 1 1 0;
@@ -118,6 +118,19 @@ const RangePresetSelector = ({
     previousRangeSelected.current = rangeSelected
   }, [handleSelectPriceRange, rangeSelected, revertPrice])
 
+  useEffect(() => {
+    if (lastSelected || tickLower === null || tickUpper === null) return
+
+    const matches = priceRanges.filter(item => item.tickLower === tickLower && item.tickUpper === tickUpper)
+    if (matches.length <= 1) return
+
+    const defaultRangePreset = getDefaultRangePreset(pool.category)
+    const matchedDefaultRange = matches.find(item => item.range === defaultRangePreset) || matches[0]
+    if (!matchedDefaultRange) return
+
+    setLastSelected(matchedDefaultRange.range)
+  }, [lastSelected, pool.category, priceRanges, tickLower, tickUpper])
+
   if (!priceRanges.length) return null
 
   return (

apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/hooks/useZapPool.ts

@@ -122,7 +122,7 @@ export const useZapPool = ({ chainId, pool: rawPool, poolType }: UseZapPoolProps
 
     const token0 = buildPoolToken(rawPool.tokens[0], tokenMetadataMap)
     const token1 = buildPoolToken(rawPool.tokens[1], tokenMetadataMap)
-    const category = mapPoolCategory(pairCategoryData?.data?.category)
+    const category = pairCategoryLoading ? undefined : mapPoolCategory(pairCategoryData?.data?.category)
     const stats = buildPoolStats(rawPool.poolStats)
     const isFarming = Boolean(rawPool.programs?.includes('eg') || rawPool.programs?.includes('lm'))
     const isFarmingLm = Boolean(rawPool.programs?.includes('lm'))
@@ -168,7 +168,7 @@ export const useZapPool = ({ chainId, pool: rawPool, poolType }: UseZapPoolProps
     })
 
     return parsedPool.success ? parsedPool.data : null
-  }, [pairCategoryData?.data?.category, poolType, rawPool, tokenMetadataMap])
+  }, [pairCategoryData?.data?.category, pairCategoryLoading, poolType, rawPool, tokenMetadataMap])
 
   const loading = (Boolean(tokenAddresses.length) && tokenMetadataLoading) || pairCategoryLoading
   const error = !loading && !normalizedPool ? 'Failed to prepare pool data' : ''

apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/hooks/useZapState.ts

@@ -167,6 +167,7 @@ export const useZapState = ({ chainId, pool, poolAddress, poolType, account, sou
 
   useEffect(() => {
     if (!isUniV3 || !pool) return
+    if (revertPrice !== defaultRevertPrice) return
     if (tickPriceState.tickLower !== null && tickPriceState.tickUpper !== null) return
     if (!defaultRangeOptions.length) return
 
@@ -180,8 +181,10 @@ export const useZapState = ({ chainId, pool, poolAddress, poolType, account, sou
     setTickUpper(defaultRange.tickUpper)
   }, [
     defaultRangeOptions,
+    defaultRevertPrice,
     isUniV3,
     pool,
+    revertPrice,
     setTickLower,
     setTickUpper,
     tickPriceState.tickLower,

apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/index.tsx

@@ -476,21 +476,21 @@ const AddLiquidity = ({ children }: AddLiquidityProps) => {
 
   return (
     <AddLiquidityRuntimeProvider value={runtimeValue}>
-      {!normalizedPool.data ? (
+      {!normalizedPool.data || normalizedPool.loading ? (
         <HStack align="flex-start" gap={24} wrap="wrap" width="100%">
-          <Stack flex="1 1 480px" maxWidth="480px" minWidth={0} gap={16}>
-            <AddLiquidityWidgetSkeleton />
-          </Stack>
-
-          <Stack flex="1 1 480px" gap={24} minWidth={0}>
+          <PoolInformationColumn>
             <AddLiquidityRoutePreview
               inputTokens={state.tokenInput.tokens}
               inputAmounts={state.tokenInput.amounts}
               pool={null}
               zapRoute={state.route.data}
             />
             {children}
-          </Stack>
+          </PoolInformationColumn>
+
+          <AddLiquidityColumn>
+            <AddLiquidityWidgetSkeleton />
+          </AddLiquidityColumn>
         </HStack>
       ) : (
         <AddLiquidityBody