From 49f81379b2284ecdbae3998d2db12d747362ef2c Mon Sep 17 00:00:00 2001
From: yjin <124853691+tfrg@users.noreply.github.com>
Date: Wed, 20 Nov 2024 20:23:20 +0900
Subject: [PATCH] Feat [GSW-1952] Earn > Pool position ID scroll (#566)

* feat: [GSW-1952] Earn > Pool position ID scroll

* fix: [GSW-1952] Earn > Pool position ID scroll

* fix: [GSW-1952] Add DOM existence check for scroll elements
---
 .../src/views/pool/pool-detail/PoolDetail.tsx | 106 +++++-------------
 1 file changed, 31 insertions(+), 75 deletions(-)

diff --git a/packages/web/src/views/pool/pool-detail/PoolDetail.tsx b/packages/web/src/views/pool/pool-detail/PoolDetail.tsx
index 4d059912f..5e6c5fa97 100644
--- a/packages/web/src/views/pool/pool-detail/PoolDetail.tsx
+++ b/packages/web/src/views/pool/pool-detail/PoolDetail.tsx
@@ -53,92 +53,48 @@ const PoolDetail: React.FC = () => {
     return false;
   }, [data?.incentiveType, positions]);
 
-  useEffect(() => {
-    if (hash === "staking" && !loading && isFetchedPosition && isStakable) {
-      const positionContainerElement = document.getElementById("staking");
-      const topPosition = positionContainerElement?.offsetTop;
-      if (!topPosition) {
-        return;
+  const isElementInDOM = (element: HTMLElement | null): boolean => {
+    return !!(element && document.body.contains(element));
+  };
+
+  const handleScroll = () => {
+    if (hash === "staking" && isStakable) {
+      const element = document.getElementById("staking");
+      if (element && isElementInDOM(element)) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
       }
-      window.scrollTo({
-        top: topPosition,
-      });
       return;
     }
 
-    if (address && isFetchedPosition && !loading && poolPath && !jumpFlagRef.current) {
-      if (hash && hash !== "staking") {
-        const position = positions.find(item => item.id.toString() === hash);
-        const isClosedPosition = !position || position?.closed;
-
-        jumpFlagRef.current = true;
-        setTimeout(() => {
-          if (isClosedPosition) {
-            const positionContainerElement = document.getElementById("liquidity-wrapper");
-            const topPosition = positionContainerElement?.offsetTop;
-            if (!topPosition) {
-              return;
-            }
-            window.scrollTo({
-              top: topPosition,
-            });
-          }
-
-          const positionContainerElement = document.getElementById(`${hash}`);
-          const topPosition = positionContainerElement?.offsetTop;
-          if (!topPosition) {
-            return;
-          }
-          window.scrollTo({
-            top: topPosition,
-          });
-        });
-        return;
+    const position = positions.find(item => item.id.toString() === hash);
+    if (position) {
+      const element = document.getElementById(hash as string);
+      if (element && isElementInDOM(element)) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
       }
+    } else {
+      const element = document.getElementById("liquidity-wrapper");
+      if (element && isElementInDOM(element)) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    }
+  };
 
-      jumpFlagRef.current = true;
-      setTimeout(() => {
-        const positionContainerElement = document.getElementById("liquidity-wrapper");
-        const topPosition = positionContainerElement?.offsetTop;
-        if (!topPosition) {
-          return;
-        }
-        window.scrollTo({
-          top: topPosition,
-        });
-      });
+  useEffect(() => {
+    if (positions.length === 0) {
+      window.scrollTo({ top: 0 });
       return;
     }
 
-    if (hash && hash !== "staking" && isFetchedPosition && !loading && poolPath && !jumpFlagRef.current) {
-      const position = positions.find(item => item.id.toString() === hash);
-      const isClosedPosition = !position || position?.closed;
-
+    if (!loading && isFetchedPosition && hash && !jumpFlagRef.current) {
       jumpFlagRef.current = true;
-      setTimeout(() => {
-        if (isClosedPosition) {
-          const positionContainerElement = document.getElementById("liquidity-wrapper");
-          const topPosition = positionContainerElement?.offsetTop;
-          if (!topPosition) {
-            return;
-          }
-          window.scrollTo({
-            top: topPosition,
-          });
-        }
-
-        const positionContainerElement = document.getElementById(`${hash}`);
-        const topPosition = positionContainerElement?.offsetTop;
-        if (!topPosition) {
-          return;
-        }
-        window.scrollTo({
-          top: topPosition,
-        });
-      });
-      return;
+      setTimeout(handleScroll, 100);
     }
-  }, [isFetchedPosition, hash, address, loading, isStakable, poolPath, positions, router]);
+  }, [loading, isFetchedPosition, hash, positions.length]);
+
+  useEffect(() => {
+    jumpFlagRef.current = false;
+  }, [hash]);
 
   return (
     <PoolLayout