Merge branch 'develop' into GSW-621-support-ugnot

gnoswap-labs · Dec 10, 2023 · 8339011 · 8339011
2 parents d13044b + 49717dc
commit 8339011
Show file tree

Hide file tree

Showing 42 changed files with 729 additions and 469 deletions.
diff --git a/packages/web/src/components/common/bar-area-graph/BarAreaGraph.spec.tsx b/packages/web/src/components/common/bar-area-graph/BarAreaGraph.spec.tsx
diff --git a/packages/web/src/components/common/bar-area-graph/BarAreaGraph.stories.tsx b/packages/web/src/components/common/bar-area-graph/BarAreaGraph.stories.tsx
@@ -13,6 +13,5 @@ export const Default: StoryObj<BarAreaGraphProps> = {
     width: 400,
     height: 300,
     minGap: 1,
-    datas,
   },
 };
diff --git a/packages/web/src/components/common/bar-area-graph/BarAreaGraph.tsx b/packages/web/src/components/common/bar-area-graph/BarAreaGraph.tsx
@@ -1,6 +1,8 @@
+import { PoolBinModel } from "@models/pool/pool-bin-model";
+import { TokenModel } from "@models/token/token-model";
 import BigNumber from "bignumber.js";
-import React, { useCallback, useState } from "react";
-import BarGraph from "../bar-graph/BarGraph";
+import React, { useCallback, useMemo, useState } from "react";
+import PoolGraph from "../pool-graph/PoolGraph";
 import { BarAreaGraphLabel, BarAreaGraphWrapper } from "./BarAreaGraph.styles";
 
 export interface BarAreaGraphData {
@@ -11,7 +13,7 @@ export interface BarAreaGraphData {
 export interface BarAreaGraphProps {
   className?: string;
   strokeWidth?: number;
-  datas: string[];
+  bins: PoolBinModel[];
   currentTick?: number;
   minGap?: number;
   width?: number;
@@ -23,6 +25,8 @@ export interface BarAreaGraphProps {
   editable?: boolean;
   isHiddenStart?: boolean;
   currentIndex?: number;
+  tokenA: TokenModel;
+  tokenB: TokenModel
 }
 
 const VIEWPORT_DEFAULT_WIDTH = 400;
@@ -42,7 +46,7 @@ function getPositionByMouseEvent(
 
 const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
   className = "",
-  datas,
+  bins,
   width = VIEWPORT_DEFAULT_WIDTH,
   height = VIEWPORT_DEFAULT_HEIGHT,
   currentTick,
@@ -52,7 +56,8 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
   maxTick,
   editable,
   isHiddenStart,
-  currentIndex,
+  tokenA,
+  tokenB,
 }) => {
   const existTickRage = (!minTick || !maxTick) === false;
   const [mouseDown, setMouseDown] = useState(false);
@@ -76,8 +81,8 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
   }, [selectedEndPosition, selectedStartPosition]);
 
   const getSelectorPoints = useCallback(() => {
-    return `${getStartPosition()},0 ${getStartPosition()},${height} ${getEndPosition()},${height} ${getEndPosition()},0`;
-  }, [height, getStartPosition, getEndPosition]);
+    return `${minTick},0 ${minTick},${height} ${maxTick},${height} ${maxTick},0`;
+  }, [minTick, height, maxTick]);
 
   const onMouseDownArea = (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
@@ -167,6 +172,32 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
     }
   };
 
+  const minTickPosition = useMemo(() => {
+    if (!minTick) {
+      return null;
+    }
+    if (minTick < 0) {
+      return 0;
+    }
+    if (minTick > width) {
+      return width;
+    }
+    return minTick;
+  }, [minTick, width]);
+
+  const maxTickPosition = useMemo(() => {
+    if (!maxTick) {
+      return null;
+    }
+    if (maxTick < 0) {
+      return 0;
+    }
+    if (maxTick > width) {
+      return width;
+    }
+    return maxTick;
+  }, [maxTick, width]);
+
   return (
     <BarAreaGraphWrapper
       className={className}
@@ -177,20 +208,17 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
       onMouseLeave={onMouseUpArea}
       onMouseMove={onMouseMoveArea}
     >
-      <BarGraph
-        minGap={1}
-        strokeWidth={100}
-        color="#596782"
-        hoverColor="#90A2C0"
-        currentTick={currentTick}
-        datas={datas}
+      <PoolGraph
+        currentTick={currentTick !== undefined ? currentTick : null}
         width={width}
         height={height}
-        tooltipOption="incentivized"
-        svgColor="incentivized"
-        currentIndex={currentIndex}
+        bins={bins}
+        tokenA={tokenA}
+        tokenB={tokenB}
+        themeKey={"dark"}
+        mouseover
       />
-      {selectedStart && !isHiddenStart && (
+      {minTickPosition && maxTickPosition && !isHiddenStart && (
         <svg className="selector" viewBox={`0 0 ${width} ${height}`}>
           <defs>
             <linearGradient id={"gradient-area"} gradientTransform="rotate(0)">
@@ -203,13 +231,13 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
               className="start-line"
               stroke="rgb(255, 2, 2)"
               strokeWidth={2}
-              x1={getStartPosition()}
+              x1={minTickPosition}
               y1={0}
-              x2={getStartPosition()}
+              x2={minTickPosition}
               y2={height}
             />
             {editable && (
-              <svg x={getStartPosition() - 12}>
+              <svg x={minTickPosition - 12}>
                 <rect width="11" height="32" rx="2" fill="#596782" />
                 <rect x="3.5" y="2" width="1" height="28" fill="#90A2C0" />
                 <rect x="6.5" y="2" width="1" height="28" fill="#90A2C0" />
@@ -226,13 +254,13 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
               className="end-line"
               stroke="rgb(0, 205, 46)"
               strokeWidth={2}
-              x1={getEndPosition()}
+              x1={maxTickPosition}
               y1={0}
-              x2={getEndPosition()}
+              x2={maxTickPosition}
               y2={height}
             />
             {editable && (
-              <svg x={getEndPosition() + 1}>
+              <svg x={maxTickPosition + 1}>
                 <rect width="11" height="32" rx="2" fill="#596782" />
                 <rect x="3.5" y="2" width="1" height="28" fill="#90A2C0" />
                 <rect x="6.5" y="2" width="1" height="28" fill="#90A2C0" />
@@ -242,19 +270,19 @@ const BarAreaGraph: React.FC<BarAreaGraphProps> = ({
         </svg>
       )}
 
-      {minLabel && !isHiddenStart && (
+      {minTickPosition && !isHiddenStart && (
         <BarAreaGraphLabel
           className="min"
-          x={getStartPosition()}
+          x={minTickPosition}
           y={20}
         >
           {minLabel}
         </BarAreaGraphLabel>
       )}
-      {maxLabel && !isHiddenStart && (
+      {maxTickPosition && !isHiddenStart && (
         <BarAreaGraphLabel
           className="max"
-          x={getEndPosition()}
+          x={maxTickPosition}
           y={20}
         >
           {maxLabel}

diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.stories.tsx b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.stories.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import MyPositionCardList from "./MyPositionCardList";
-import { dummyPositionList } from "@containers/my-position-card-list-container/MyPositionCardListContainer";
 import { action } from "@storybook/addon-actions";
 
 export default {
@@ -16,7 +15,7 @@ export default {
 } as ComponentMeta<typeof MyPositionCardList>;
 
 const Template: ComponentStory<typeof MyPositionCardList> = args => (
-  <MyPositionCardList {...args} positions={dummyPositionList} />
+  <MyPositionCardList {...args} positions={[]} />
 );
 
 export const Default = Template.bind({});

diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx
@@ -2,14 +2,14 @@ import React from "react";
 import LoadMoreButton from "@components/common/load-more-button/LoadMoreButton";
 import MyPositionCard from "@components/common/my-position-card/MyPositionCard";
 import { SHAPE_TYPES, skeletonStyle } from "@constants/skeleton.constant";
-import { PoolPosition } from "@containers/earn-my-position-container/EarnMyPositionContainer";
 import { BlankPositionCard, CardListWrapper, GridWrapper } from "./MyPositionCardList.styles";
+import { PoolPositionModel } from "@models/position/pool-position-model";
 
 interface MyPositionCardListProps {
   loadMore?: boolean;
   isFetched: boolean;
   onClickLoadMore?: () => void;
-  positions: PoolPosition[];
+  positions: PoolPositionModel[];
   currentIndex: number;
   movePoolDetail: (id: string) => void;
   mobile: boolean;
@@ -38,8 +38,8 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
     <GridWrapper ref={divRef} onScroll={onScroll}>
       {isFetched &&
         positions.length > 0 &&
-        positions.map((item, idx) => (
-          <MyPositionCard currentIndex={idx} item={item} key={idx} movePoolDetail={movePoolDetail} mobile={mobile}/>
+        positions.map((position, idx) => (
+          <MyPositionCard currentIndex={idx} position={position} key={idx} movePoolDetail={movePoolDetail} mobile={mobile} />
         ))}
       {isFetched &&
         positions.length > 0 && positions.length < 4 &&
@@ -56,10 +56,10 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
           />
         ))}
     </GridWrapper>
-    {(showLoadMore && loadMore && onClickLoadMore &&(
-        <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />
-      )
-    )} 
+    {(showLoadMore && loadMore && onClickLoadMore && (
+      <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />
+    )
+    )}
     {(showPagination &&
       <div className="box-indicator">
         <span className="current-page">{currentIndex}</span>

diff --git a/packages/web/src/components/common/my-position-card/MyPositionCard.stories.tsx b/packages/web/src/components/common/my-position-card/MyPositionCard.stories.tsx
@@ -16,11 +16,9 @@ const Template: ComponentStory<typeof MyPositionCard> = args => (
 
 export const Staked = Template.bind({});
 Staked.args = {
-  item: dummyPositionList[1],
 };
 
 export const Unstaked = Template.bind({});
 Unstaked.args = {
-  item: dummyPositionList[0],
   movePoolDetail: action("movePoolDetail"),
 };
diff --git a/packages/web/src/components/common/my-position-card/MyPositionCard.styles.ts b/packages/web/src/components/common/my-position-card/MyPositionCard.styles.ts
@@ -1,11 +1,10 @@
 import { fonts } from "@constants/font.constant";
-import { STAKED_OPTION } from "@constants/option.constant";
 import styled from "@emotion/styled";
 import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 interface CardProps {
-  stakeType: STAKED_OPTION;
+  staked: boolean;
 }
 
 export const MyPositionCardWrapperBorder = styled.div`