fix: refactor graph tooltip architecture

gnoswap-labs · Aug 22, 2024 · 46b025a · 46b025a
1 parent fee2fd4
commit 46b025a
Show file tree

Hide file tree

Showing 12 changed files with 952 additions and 730 deletions.
diff --git a/packages/web/src/components/common/bar-area-graph/BarAreaGraph.tsx b/packages/web/src/components/common/bar-area-graph/BarAreaGraph.tsx
@@ -52,18 +52,20 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
   poolBins,
 }) => {
   const isHideBar = useMemo(() => {
-    const isAllReserveZeroBin40 = poolBins.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
-    const isAllReserveZeroBin = positionBins.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
+    const isAllReserveZeroBin40 = poolBins.every(
+      item =>
+        Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0,
+    );
+    const isAllReserveZeroBin = positionBins.every(
+      item =>
+        Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0,
+    );
 
     return isAllReserveZeroBin40 && isAllReserveZeroBin;
   }, [poolBins, positionBins]);
 
   return (
-    <BarAreaGraphWrapper
-      className={className}
-      width={width}
-      height={height}
-    >
+    <BarAreaGraphWrapper className={className} width={width} height={height}>
       <PoolGraph
         currentTick={currentTick !== undefined ? currentTick : null}
         width={width}
@@ -80,7 +82,7 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
         poolPrice={pool?.price || 1}
         isPosition
         binsMyAmount={positionBins}
-        showBar={!isHideBar}
+        disabled={isHideBar}
       />
     </BarAreaGraphWrapper>
   );

diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.styles.ts b/packages/web/src/components/common/pool-graph/PoolGraph.styles.ts
@@ -1,6 +1,4 @@
 import styled from "@emotion/styled";
-import { fonts } from "@constants/font.constant";
-import { media } from "@styles/media";
 
 export const PoolGraphWrapper = styled.div`
   position: relative;
@@ -22,142 +20,10 @@ export const PoolGraphWrapper = styled.div`
         stroke: ${({ theme }) => theme.color.background06};
       }
       &:hover {
-        .bin-inner { 
+        .bin-inner {
           opacity: 0.4;
         }
       }
     }
   }
 `;
-
-export const PoolGraphTooltipWrapper = styled.div`
-  padding: 0;
-  pointer-events: none;
-  border-radius: 8px;
-
-  &.disabled {
-    display: none;
-  }
-
-  .tooltip-wrapper {
-    display: flex;
-    flex-direction: column;
-    background-color: ${({ theme }) => theme.color.background02};
-    align-items: flex-start;
-    border-radius: 8px;
-    gap: 8px;
-    ${fonts.body12};
-    line-height: 1em;
-
-    .row {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      gap: 8px;
-      & > span {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        &.price-range {
-          justify-content: flex-end;
-        }
-        &.token-title {
-          ${media.mobile} {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .header {
-      display: flex;
-      flex-direction: column;
-      color: ${({ theme }) => theme.color.text04};
-      justify-content: space-between;
-      width: 100%;
-      &.mt-8 {
-        margin-top: 8px;
-      }
-      .row {
-        padding: 3px 0;
-      }
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      color: ${({ theme }) => theme.color.text02};
-      gap: 8px;
-      width: 100%;
-      .row {
-        padding: 4px 0;
-      }
-      &:last-of-type {
-        .token {
-          ${media.mobile} {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .token {
-      flex-shrink: 0;
-      min-width: 80px;
-      gap: 8px;
-
-      img {
-        width: 20px;
-        height: 20px;
-      }
-      ${media.mobile} {
-        display: none;
-      }
-    }
-    .amount {
-      flex-shrink: 0;
-      min-width: 76px;
-      & .hidden {
-        display: inline;
-        overflow: hidden;
-        text-overflow: clip;
-        white-space: nowrap;
-        word-break: break-all;
-      }
-      & .small-font {
-        font-size: 10px;
-      }
-      &.w-100 {
-        min-width: 108px;
-      }
-      img {
-        width: 20px;
-        height: 20px;
-        display: none;
-      }
-      
-      ${media.mobile} {
-        &.total-amount {
-          width: 85px;
-          gap: 8px;
-        }
-        img {
-          display: block;
-        }
-      }
-    }
-
-    .price-range {
-      width: 100%;
-    }
-    .small-font {
-      font-size: 12px;
-    }
-    ${media.mobile} {
-      max-width: max-content;
-    }
-    @media (max-width: 360px){
-      max-width: 336px;
-    }
-  }
-`;