[GSW-411] fix: Fix liqutidy hover chart

gnoswap-labs · Nov 22, 2023 · a56f71f · a56f71f
1 parent 2433438
commit a56f71f
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 13 deletions.
diff --git a/packages/web/src/components/common/bar-area-graph/BarAreaGraph.styles.ts b/packages/web/src/components/common/bar-area-graph/BarAreaGraph.styles.ts
@@ -19,6 +19,9 @@ export const BarAreaGraphWrapper = styled.div<{
     width: 100%;
     height: 100%;
     pointer-events: none;
+    > g, > polygon {
+      pointer-events: initial;
+    }
     .area {
       background: linear-gradient(
         270deg,

diff --git a/packages/web/src/components/common/bar-graph/BarGraph.tsx b/packages/web/src/components/common/bar-graph/BarGraph.tsx
@@ -134,12 +134,12 @@ const BarGraph: React.FC<BarGraphProps> = ({
 
     let currentPointIndex = -1;
     for (const point of getGraphPoints()) {
-      const distance = Math.abs(point.x - xPosition);
+      const distance = xPosition - point.x;
       currentPointIndex += 1;
-      if (minDistance < 0) {
+      if (minDistance < 0 && distance >= 0) {
         minDistance = distance;
       }
-      if (distance < minDistance + 1) {
+      if (distance >= 0 && distance < minDistance + 1) {
         currentPoint = point;
         minDistance = distance;
         setCurrentPointIndex(currentPointIndex);

diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.tsx b/packages/web/src/components/common/pool-graph/PoolGraph.tsx
@@ -196,7 +196,7 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
 
   function onMouseoverChartBin(event: MouseEvent, bin: PoolBinModel) {
     if (mouseover && tooltipRef.current) {
-      if (tooltipRef.current.getAttribute("bin-id") !== bin.binId) {
+      if (bin.binId) {
         const content = renderToStaticMarkup(
           <PoolGraphBinTooptip
             tokenA={tokenA}

diff --git a/packages/web/src/components/earn/earn-my-positions/EarnMyPositions.stories.tsx b/packages/web/src/components/earn/earn-my-positions/EarnMyPositions.stories.tsx
@@ -66,12 +66,12 @@ export const position: PoolPosition = {
   currentPriceAmount: "1184.24 GNOS per ETH",
   minPriceAmount: "1.75 GNOT Per GNOS",
   maxPriceAmount: "2.25 GNOT Per GNOS",
-  currentTick: 4,
+  currentTick: 20,
   minTick: 40,
   maxTick: 200,
   minLabel: "-30%",
   maxLabel: "50%",
-  ticks: ["1", "1", "2", "2", "3", "3", "2", "2", "1", "1"]
+  ticks: ["1", "1", "3", "0", "2", "0", "4", "0", "0", "1", "2", "4","1", "5", "1", "6", "2", "7", "0", "1", "0", "2", "5", "0", "1", "0", "5", "4", "1", "3", "0", "5", "2", "1", "1", "0", "0", "0", "0", "0"]
 };
 
 export const UnConnected = Template.bind({});

diff --git a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts
@@ -55,7 +55,9 @@ export const LoadingWrapper = styled.div`
   box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08);
   border-radius: 10px;
   padding: 16px 0px 12px;
-
+  & > div:first-of-type {
+    padding: 0 24px 13px 24px;
+  }
   ${media.mobile} {
     padding: 16px 0px;
   }

diff --git a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts
@@ -55,7 +55,9 @@ export const LoadingWrapper = styled.div`
   box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08);
   border-radius: 10px;
   padding: 16px 0px 12px;
-
+  & > div:first-of-type {
+    padding: 0 24px 13px 24px;
+  }
   ${media.mobile} {
     padding: 16px 0px;
   }

diff --git a/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts b/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts
@@ -18,6 +18,9 @@ export const TableWrapper = styled.div`
   color: ${({ theme }) => theme.color.text04};
   ${fonts.body11};
   overflow-x: auto;
+  &.hidden-scroll {
+    overflow-x: hidden;
+  }
   .scroll-wrapper {
     ${mixins.flexbox("column", "flex-start", "flex-start")};
     height: auto;
@@ -159,6 +162,7 @@ export const noDataText = (theme: Theme) => css`
   color: ${theme.color.text04};
   ${fonts.body12};
   width: calc(100vw - 82px);
+  max-width: 1358px;
   height: 300px;
   ${media.mobile} {
     width: calc(100vw - 34px);

diff --git a/packages/web/src/components/home/token-list-table/TokenListTable.tsx b/packages/web/src/components/home/token-list-table/TokenListTable.tsx
@@ -68,7 +68,7 @@ const TokenListTable: React.FC<TokenListTableProps> = ({
   };
 
   return breakpoint !== DEVICE_TYPE.MOBILE ? (
-    <TableWrapper>
+    <TableWrapper className={tokens.length === 0 ? "hidden-scroll" : ""}>
       <div className="scroll-wrapper">
         <div className="token-list-head">
           {Object.values(TABLE_HEAD).map((head, idx) => (

diff --git a/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts b/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts
@@ -55,7 +55,9 @@ export const LoadingWrapper = styled.div`
   box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08);
   border-radius: 10px;
   padding: 16px 0px 12px;
-
+  & > div:first-of-type {
+    padding: 0 24px 13px 24px;
+  }
   ${media.mobile} {
     padding: 16px 0px;
   }

diff --git a/packages/web/src/constants/skeleton.constant.ts b/packages/web/src/constants/skeleton.constant.ts
@@ -46,7 +46,7 @@ export const skeletonTrendingStyle =
     width: ${typeof skeletonWidth === "number"
       ? `${skeletonWidth}px`
       : skeletonWidth};
-    height: 25px;
+    height: 24px;
     background: ${theme.color.background23};
     overflow: hidden;
     border-radius: ${type === SHAPE_TYPES.CIRCLE ? "50%" : "2px"};
@@ -55,10 +55,14 @@ export const skeletonTrendingStyle =
       position: absolute;
       left: 0%;
       top: 0;
-      transform: translateX(-50%);
+      transform: translateX(-100%);
       width: 100%;
       height: 100%;
-      background: ${theme.color.backgroundGradient5};
+      background: linear-gradient(
+        0,
+        ${theme.color.backgroundGradient} 0%,
+        ${theme.color.backgroundGradient} 100%
+      );
       animation: ${skeletonAni} 2s ease infinite;
     }
   `;