fix: [GSW-2033] TokenSwapChart Mobile Hover UI

gnoswap-labs · Jan 5, 2025 · c10c5b1 · c10c5b1
1 parent de4d54f
commit c10c5b1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenChart.tsx b/packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenChart.tsx
@@ -12,11 +12,23 @@ interface SwapTokenChartProps {
   data: IPriceResponse[];
   isLoading: boolean;
   isFetched: boolean;
+  isChartHovered: boolean;
   onMouseMove: (data?: LineGraphData) => void;
   onMouseOut: () => void;
+  onMouseHover: () => void;
+  onMouseLeave: () => void;
 }
 
-const SwapTokenChart = ({ data = [], isLoading, isFetched, onMouseMove, onMouseOut }: SwapTokenChartProps) => {
+const SwapTokenChart = ({
+  data = [],
+  isLoading,
+  isFetched,
+  isChartHovered,
+  onMouseMove,
+  onMouseOut,
+  onMouseHover,
+  onMouseLeave,
+}: SwapTokenChartProps) => {
   const hasData = isFetched && data && data.length > 0;
   const isNoData = isFetched && !isLoading && !data;
 
@@ -32,8 +44,21 @@ const SwapTokenChart = ({ data = [], isLoading, isFetched, onMouseMove, onMouseO
       .reverse();
   }, [hasData, data]);
 
+  const handleMouseMove = React.useCallback(
+    (data?: LineGraphData) => {
+      onMouseMove(data);
+    },
+    [onMouseMove],
+  );
+
+  const handleMouseOut = React.useCallback(() => {
+    if (!isChartHovered) {
+      onMouseOut();
+    }
+  }, [onMouseOut, isChartHovered]);
+
   return (
-    <SwapTokenChartWrapper>
+    <SwapTokenChartWrapper onMouseEnter={onMouseHover} onMouseLeave={onMouseLeave}>
       {isLoading && (
         <LoadingWrapper>
           <LoadingSpinner />
@@ -53,8 +78,8 @@ const SwapTokenChart = ({ data = [], isLoading, isFetched, onMouseMove, onMouseO
           hasNoLabel={true}
           cursor
           isShowTooltip={false}
-          onMouseMove={onMouseMove}
-          onMouseOut={onMouseOut}
+          onMouseMove={handleMouseMove}
+          onMouseOut={handleMouseOut}
         />
       )}
     </SwapTokenChartWrapper>

diff --git a/packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenInfo.tsx b/packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenInfo.tsx
@@ -16,6 +16,7 @@ interface SwapTokenInfoProps {
 const SwapTokenInfo = ({ token }: SwapTokenInfoProps) => {
   const { isMobile, breakpoint } = useWindowSize();
   const [chartData, setChartData] = React.useState<LineGraphData | undefined>();
+  const [isChartHovered, setIsChartHovered] = React.useState(false);
 
   const tokenData = React.useMemo(
     () => ({
@@ -69,8 +70,11 @@ const SwapTokenInfo = ({ token }: SwapTokenInfoProps) => {
         data={prices7d}
         isLoading={isLoading}
         isFetched={isFetched}
+        isChartHovered={isChartHovered}
         onMouseMove={handleMouseMove}
         onMouseOut={handleMouseOut}
+        onMouseHover={() => setIsChartHovered(true)}
+        onMouseLeave={() => setIsChartHovered(false)}
       />
     </SwapTokenInfoWrapper>
   );