fix: position status in zap widget (#2915)

Author: tienkane

packages/liquidity-widgets/src/components/Header/index.tsx

@@ -1,14 +1,9 @@
+import { useMemo } from 'react';
+
 import { Trans, t } from '@lingui/macro';
 
 import { useCopy } from '@kyber/hooks';
-import {
-  DEXES_INFO,
-  NATIVE_TOKEN_ADDRESS,
-  NETWORKS_INFO,
-  defaultToken,
-  univ3PoolNormalize,
-  univ3Position,
-} from '@kyber/schema';
+import { DEXES_INFO, NATIVE_TOKEN_ADDRESS, NETWORKS_INFO, defaultToken, univ3Types } from '@kyber/schema';
 import { InfoHelper, LoadingCounter, MouseoverTooltip, Skeleton, TokenLogo, TokenSymbol } from '@kyber/ui';
 import { shortenAddress } from '@kyber/utils/crypto';
 
@@ -27,10 +22,18 @@ const Header = () => {
     'poolType',
     'positionId',
   ]);
-  const { pool } = usePoolStore(['pool']);
+  const { pool, poolPrice } = usePoolStore(['pool', 'poolPrice']);
   const { position } = usePositionStore(['position']);
 
-  const { toggleSetting, uiState, loading: zapLoading, getZapRoute, zapRouteDisabled } = useZapState();
+  const {
+    toggleSetting,
+    uiState,
+    loading: zapLoading,
+    getZapRoute,
+    zapRouteDisabled,
+    minPrice,
+    maxPrice,
+  } = useZapState();
 
   const initializing = !pool;
   const poolAddress = initializing ? '' : pool.address;
@@ -52,14 +55,13 @@ const Header = () => {
 
   const { icon: dexLogo, name: rawName } = DEXES_INFO[poolType];
   const dexName = typeof rawName === 'string' ? rawName : rawName[chainId];
+  const isUniV3 = univ3Types.includes(poolType as any);
 
-  const { success, data } = univ3Position.safeParse(position);
-  const { success: isUniV3, data: univ3Pool } = univ3PoolNormalize.safeParse(pool);
+  const isOutOfRange = useMemo(() => {
+    if (!positionId || !isUniV3 || !poolPrice || minPrice === null || maxPrice === null) return false;
+    return poolPrice < +minPrice || poolPrice > +maxPrice;
+  }, [isUniV3, maxPrice, minPrice, poolPrice, positionId]);
 
-  const isOutOfRange =
-    !!positionId && position && success && isUniV3
-      ? univ3Pool.tick < data.tickLower || univ3Pool.tick >= data.tickUpper
-      : false;
   const isClosed = position !== null && position.liquidity.toString() === '0';
 
   const handleToggleSetting = (e: React.MouseEvent<HTMLDivElement>) => {

packages/zap-migration-widgets/src/components/PoolInfo.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { Trans, t } from '@lingui/macro';
 
 import { useCopy } from '@kyber/hooks';
@@ -11,6 +13,7 @@ import {
 } from '@kyber/schema';
 import { InfoHelper, Skeleton, TokenLogo, TokenSymbol } from '@kyber/ui';
 import { shortenAddress } from '@kyber/utils/crypto';
+import { sqrtToPrice, tickToPrice } from '@kyber/utils/uniswapv3';
 
 import { usePoolStore } from '@/stores/usePoolStore';
 import { usePositionStore } from '@/stores/usePositionStore';
@@ -53,6 +56,17 @@ export function PoolInfo({ type }: { type: PoolInfoType }) {
     copyClassName: '!text-blue',
   });
 
+  const { success: isUniV3, data: uniV3Pool } = univ3PoolNormalize.safeParse(pool);
+
+  const isOutOfRange = useMemo(() => {
+    if (!position || !isUniV3 || !uniV3Pool) return false;
+    const poolPrice = +sqrtToPrice(BigInt(uniV3Pool.sqrtPriceX96), token0.decimals, token1.decimals);
+    const lowerPrice = +tickToPrice((position as UniV3Position).tickLower, token0.decimals, token1.decimals);
+    const upperPrice = +tickToPrice((position as UniV3Position).tickUpper, token0.decimals, token1.decimals);
+    return poolPrice < lowerPrice || poolPrice > upperPrice;
+  }, [isUniV3, position, token0.decimals, token1.decimals, uniV3Pool]);
+  const isClosed = position && position.liquidity.toString() === '0';
+
   if (!pool)
     return (
       <div className="ui-h-[62px] flex flex-col gap-2 rounded-md bg-[#ffffff0a] px-4 py-3 w-full">
@@ -61,14 +75,6 @@ export function PoolInfo({ type }: { type: PoolInfoType }) {
       </div>
     );
 
-  const { success: isUniV3, data: uniV3Pool } = univ3PoolNormalize.safeParse(pool);
-
-  const isOutOfRange =
-    position && isUniV3
-      ? uniV3Pool.tick < (position as UniV3Position).tickLower || uniV3Pool.tick > (position as UniV3Position).tickUpper
-      : false;
-  const isClosed = position && position.liquidity.toString() === '0';
-
   const dexName =
     typeof DEXES_INFO[pool.poolType].name === 'string'
       ? (DEXES_INFO[pool.poolType].name as string)

packages/zap-out-widgets/src/components/Header.tsx

@@ -1,9 +1,12 @@
+import { useMemo } from 'react';
+
 import { Trans, t } from '@lingui/macro';
 
 import { useCopy } from '@kyber/hooks';
-import { DEXES_INFO, NATIVE_TOKEN_ADDRESS, NETWORKS_INFO, UniV3Pool, UniV3Position, univ3Types } from '@kyber/schema';
+import { DEXES_INFO, NATIVE_TOKEN_ADDRESS, NETWORKS_INFO, UniV3Position, univ3Types } from '@kyber/schema';
 import { InfoHelper, MouseoverTooltip, Skeleton, TokenLogo, TokenSymbol } from '@kyber/ui';
 import { cn } from '@kyber/utils/tailwind-helpers';
+import { tickToPrice } from '@kyber/utils/uniswapv3';
 
 import SettingIcon from '@/assets/svg/setting.svg';
 import X from '@/assets/svg/x.svg';
@@ -13,7 +16,9 @@ import { useZapOutContext } from '@/stores';
 import { useZapOutUserState } from '@/stores/state';
 
 export const Header = () => {
-  const { poolAddress, onClose, poolType, pool, position, positionId, theme, chainId } = useZapOutContext(s => s);
+  const { poolAddress, onClose, poolType, pool, position, positionId, theme, chainId, poolPrice } = useZapOutContext(
+    s => s,
+  );
   const isUniV3 = univ3Types.includes(poolType as any);
 
   const { degenMode, toggleSetting, mode } = useZapOutUserState();
@@ -30,11 +35,12 @@ export const Header = () => {
     text: loading ? '' : pool.token1.address,
   });
 
-  const isOutOfRange =
-    isUniV3 && !loading
-      ? (position as UniV3Position).tickLower > (pool as UniV3Pool).tick ||
-        (pool as UniV3Pool).tick >= (position as UniV3Position).tickUpper
-      : false;
+  const isOutOfRange = useMemo(() => {
+    if (loading || !isUniV3 || !poolPrice) return false;
+    const lowerPrice = +tickToPrice((position as UniV3Position).tickLower, pool.token0.decimals, pool.token1.decimals);
+    const upperPrice = +tickToPrice((position as UniV3Position).tickUpper, pool.token0.decimals, pool.token1.decimals);
+    return poolPrice < lowerPrice || poolPrice > upperPrice;
+  }, [isUniV3, loading, pool?.token0.decimals, pool?.token1.decimals, poolPrice, position]);
 
   const { icon: dexLogo, name: rawName } = DEXES_INFO[poolType];
   const dexName = typeof rawName === 'string' ? rawName : rawName[chainId];