[GSW-479] feat: Implement Pool Graph with Pool Bins

packages/web/package.json

@@ -23,6 +23,7 @@
     "@tanstack/react-query": "4.26.1",
     "axios": "1.3.4",
     "bignumber.js": "9.1.1",
+    "d3": "^7.8.5",
     "dayjs": "1.11.7",
     "jotai": "2.2.1",
     "next": "13.2.3",
@@ -58,6 +59,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/d3": "^7.4.0",
     "@types/jest": "29.4.0",
     "@types/node": "18.14.6",
     "@types/react": "18.0.28",

packages/web/src/components/common/pool-graph/PoolGraph.stories.tsx

@@ -1,6 +1,8 @@
 import PoolGraph, { type PoolGraphProps } from "./PoolGraph";
 import { Meta, StoryObj } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
+import POOLS from "@repositories/pool/mock/pools.json";
+
+const pool = POOLS.pools[0];
 
 export default {
   title: "common/PoolGraph",
@@ -9,10 +11,13 @@ export default {
 
 export const Default: StoryObj<PoolGraphProps> = {
   args: {
-    ticks: [],
-    width: 400,
-    height: 200,
-    onChangeMinTick: action("onChangeMinTick"),
-    onChangeMaxTick: action("onChangeMaxTick"),
+    tokenA: pool.tokenA,
+    tokenB: pool.tokenB,
+    bins: pool.bins,
+    mouseover: true,
+    currentTick: 18,
+    width: 600,
+    height: 400,
+    zoomable: false,
   },
 };

packages/web/src/components/common/pool-graph/PoolGraph.styles.ts

@@ -1,91 +1,83 @@
-import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { fonts } from "@constants/font.constant";
 
-export const PoolGraphWrapper = styled.div<{
-  width?: number;
-  height?: number;
-}>`
+export const PoolGraphWrapper = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  width: ${({ width }) => (width ? `${width}px` : "100%")};
-  height: ${({ height }) => (height ? `${height}px` : "100%")};
-  overflow: visible;
+  width: 100%;
+  height: auto;
 
-  svg.selector {
+  .tooltip-container {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    pointer-events: none;
 
-    .area {
-      background: linear-gradient(
-        270deg,
-        rgba(0, 205, 46, 0.2) 0%,
-        rgba(255, 2, 2, 0.2) 100%
-      );
-    }
-  }
-`;
+    .tooltip-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 390px;
+      background-color: ${({ theme }) => theme.color.background02};
+      padding: 16px;
+      align-items: flex-start;
+      border-radius: 8px;
+      gap: 8px;
+      ${fonts.body12};
+      line-height: 1em;
 
-interface PoolGraphTooltipWrapperProps {
-  x: number;
-  y: number;
-}
+      .row {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        gap: 16px;
 
-export const PoolGraphTooltipWrapper = styled.div<PoolGraphTooltipWrapperProps>`
-  position: absolute;
-  top: ${props => `${props.y}px`};
-  left: ${props => `${props.x}px`};
-  display: flex;
-  flex-direction: column;
-  width: 157px;
-  height: auto;
-  padding: 6px 8px;
-  background: ${({ theme }) => theme.color.background05};
-  border-radius: 4px;
-  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.15);
-  overflow: visible;
-  ${fonts.p4};
+        & > span {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+      }
 
-  & .tooltip-header {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: auto;
-    justify-content: space-between;
-  }
+      .header {
+        display: flex;
+        flex-direction: column;
+        color: ${({ theme }) => theme.color.text04};
+        margin-bottom: 5px;
+      }
 
-  & .tooltip-body {
-    color: ${({ theme }) => theme.color.point};
-  }
-`;
+      .content {
+        display: flex;
+        flex-direction: column;
+        color: ${({ theme }) => theme.color.text02};
+        gap: 8px;
+      }
 
-export interface PoolGraphLabelProps {
-  x: number;
-  y: number;
-}
+      .token {
+        flex-shrink: 0;
+        width: 80px;
+        gap: 8px;
 
-export const PoolGraphLabel = styled.span<PoolGraphLabelProps>`
-  position: absolute;
-  display: flex;
-  top: ${({ y }) => `${y}px`};
-  width: 45px;
-  height: 23px;
-  justify-content: center;
-  align-items: center;
-  ${fonts.p3}
-  font-weight: 700;
-  border-radius: 4px;
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
 
-  &.min {
-    left: ${({ x }) => (x < 45 ? `${x}px` : `${x - 45}px`)};
-    background-color: #ff503f99;
-  }
+      .amount {
+        flex-shrink: 0;
+        width: 80px;
 
-  &.max {
-    left: ${({ x }) => `${x}px`};
-    background-color: #60e66a99;
+        & .hidden {
+          display: inline;
+          overflow: hidden;
+          text-overflow: clip;
+          white-space: nowrap;
+          word-break: break-all;
+        }
+      }
+
+      .price-range {
+        width: 100%;
+      }
+    }
   }
 `;