feat: Add Pool list graph

gnoswap-labs · Dec 9, 2023 · 1d86c6e · 1d86c6e
1 parent bf2ccb9
commit 1d86c6e
Show file tree

Hide file tree

Showing 5 changed files with 245 additions and 171 deletions.
diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.styles.ts b/packages/web/src/components/common/pool-graph/PoolGraph.styles.ts
@@ -23,76 +23,81 @@ export const PoolGraphWrapper = styled.div`
       }
     }
   }
-  .tooltip-container {
-    position: absolute;
-    pointer-events: none;
+`;
+
+export const PoolGraphTooltipWrapper = styled.div`
+  padding: 0;
+  pointer-events: none;
+  border-radius: 8px;
+
+  &.disabled {
+    display: none;
+  }
+
+  .tooltip-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 390px;
+    background-color: ${({ theme }) => theme.color.background02};
+    align-items: flex-start;
     border-radius: 8px;
-    .tooltip-wrapper {
+    gap: 8px;
+    ${fonts.body12};
+    line-height: 1em;
+
+    .row {
       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;
+      flex-direction: row;
+      width: 100%;
+      gap: 16px;
 
-      .row {
+      & > span {
         display: flex;
         flex-direction: row;
-        width: 100%;
-        gap: 16px;
-
-        & > span {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
+        align-items: center;
       }
+    }
 
-      .header {
-        display: flex;
-        flex-direction: column;
-        color: ${({ theme }) => theme.color.text04};
-        margin-bottom: 5px;
-      }
+    .header {
+      display: flex;
+      flex-direction: column;
+      color: ${({ theme }) => theme.color.text04};
+      margin-bottom: 5px;
+    }
 
-      .content {
-        display: flex;
-        flex-direction: column;
-        color: ${({ theme }) => theme.color.text02};
-        gap: 8px;
-      }
+    .content {
+      display: flex;
+      flex-direction: column;
+      color: ${({ theme }) => theme.color.text02};
+      gap: 8px;
+    }
 
-      .token {
-        flex-shrink: 0;
-        width: 80px;
-        gap: 8px;
+    .token {
+      flex-shrink: 0;
+      width: 80px;
+      gap: 8px;
 
-        img {
-          width: 20px;
-          height: 20px;
-        }
+      img {
+        width: 20px;
+        height: 20px;
       }
+    }
 
-      .amount {
-        flex-shrink: 0;
-        width: 80px;
+    .amount {
+      flex-shrink: 0;
+      width: 80px;
 
-        & .hidden {
-          display: inline;
-          overflow: hidden;
-          text-overflow: clip;
-          white-space: nowrap;
-          word-break: break-all;
-        }
+      & .hidden {
+        display: inline;
+        overflow: hidden;
+        text-overflow: clip;
+        white-space: nowrap;
+        word-break: break-all;
       }
+    }
 
-      .price-range {
-        width: 100%;
-      }
+    .price-range {
+      width: 100%;
     }
   }
 `;