feat: [GSW-598] Integrate Position Card Data (#241)

* feat: [GSW-621] Support for ugnot in Swap Router * fix: Fix build errors * feat: [GSW-621] Support for ugnot in Add liquidity * fix: Fix a Create position token amount rate * fix: Fix a test data to foo token * fix: Fix a test data to foo token * fix: Fix a deposit amount * fix: Update balances * fix: Fix a send message when native amount 0 * fix: Fix a caclulate amount * fix: Fix a caclulate amount * feat: [GSW-598] Integrate Position Card Data * feat: Add value decoration * fix: Fix area position * feat: Add Pool list graph * feat: Resolve pool list bins
gnoswap-labs · Dec 10, 2023 · 49717dc · 49717dc
1 parent f01a492
commit 49717dc
Show file tree

Hide file tree

Showing 110 changed files with 1,986 additions and 1,410 deletions.
diff --git a/packages/web/.env.example b/packages/web/.env.example
@@ -5,4 +5,5 @@ NEXT_PUBLIC_PACKAGE_ROUTER_ADDRESS="g1ernz3lj85hnn3ucug73ymgkhqdv2lg8e4yd48e"
 NEXT_PUBLIC_PACKAGE_POOL_PATH="gno.land/r/pool"
 NEXT_PUBLIC_PACKAGE_POOL_ADDRESS="g1ee305k8yk0pjz443xpwtqdyep522f9g5r7d63w"
 NEXT_PUBLIC_PACKAGE_POSITION_PATH="gno.land/r/position"
-NEXT_PUBLIC_PACKAGE_POSITION_ADDRESS="g1htpxzv2dkplvzg50nd8fswrneaxmdpwn459thx"
+NEXT_PUBLIC_PACKAGE_POSITION_ADDRESS="g1htpxzv2dkplvzg50nd8fswrneaxmdpwn459thx"
+NEXT_PUBLIC_WRAPPED_GNOT_PATH="gno.land/r/wugnot"
diff --git a/packages/web/src/common/values/token-constant.ts b/packages/web/src/common/values/token-constant.ts
@@ -0,0 +1,15 @@
+import { TokenModel } from "@models/token/token-model";
+
+export const GNOT_TOKEN: TokenModel = {
+  type: "native",
+  chainId: "",
+  createdAt: "0001-01-01T00:00:00Z",
+  name: "Gnoland",
+  path: "gnot",
+  decimals: 6,
+  symbol: "GNOT",
+  logoURI:
+    "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/gno-native/images/gnot.svg",
+  priceId: "gnot",
+  address: "",
+};
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/bar-graph/BarGraph.tsx b/packages/web/src/components/common/bar-graph/BarGraph.tsx
@@ -18,7 +18,7 @@ export interface BarGraphProps {
   tooltipOption?: string;
   svgColor?: string;
   currentIndex?: number;
-  customData?: { height: number, locationTooltip: number};
+  customData?: { height: number, locationTooltip: number };
   times?: string[];
   radiusBorder?: number;
 }
@@ -75,7 +75,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
   height = VIEWPORT_DEFAULT_HEIGHT,
   tooltipOption = "default",
   svgColor = "default",
-  customData = { height: 0, locationTooltip: 0},
+  customData = { height: 0, locationTooltip: 0 },
   times = [],
   radiusBorder = 0,
 }) => {
@@ -166,7 +166,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
       setCurrentPointIndex(-1);
       return;
     }
-  const { currentTarget } = event;
+    const { currentTarget } = event;
     const { left, top } = currentTarget.getBoundingClientRect();
     const positionX = (clientX || 0) - left;
     const clientWidth = currentTarget.clientWidth;
@@ -190,7 +190,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
         setCurrentPointIndex(currentPointIndex);
       }
       if (currentPoint) {
-        setChartPoint({ x: positionX, y: (clientY || 0) - top});
+        setChartPoint({ x: positionX, y: (clientY || 0) - top });
         setCurrentPoint(currentPoint);
       }
     }
@@ -208,11 +208,11 @@ const BarGraph: React.FC<BarGraphProps> = ({
     return "right";
   }, [currentPoint, width, locationTooltip, height, chartPoint, customHeight]);
 
-    
+
   const onTouchMove = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
     onMouseMove(event);
   };
-  
+
   const onTouchStart = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
     event.preventDefault();
     onMouseMove(event);
@@ -230,45 +230,45 @@ const BarGraph: React.FC<BarGraphProps> = ({
       onTouchMove={onTouchMove}
       onTouchStart={onTouchStart}
     >
-      <FloatingTooltip className="chart-tooltip" isHiddenArrow position={locationTooltipPosition} 
-        content={tooltipOption === "default" && currentPointIndex > -1 && activated ? 
-        <BarGraphTooltipWrapper>
-          <div className="tooltip-body">
-            <span className="date">
-              {parseTime(times[currentPointIndex]).date}
-            </span>
-          </div>
-          <div className="tooltip-header">
-            <span className="value">{`$${Number(BigNumber(
-              datas[currentPointIndex],
-            )).toLocaleString()}`}</span>
-          </div>
-        </BarGraphTooltipWrapper>: 
-        tooltipOption === "incentivized" && currentPointIndex > -1 && activated ?
-        <IncentivizeGraphTooltipWrapper>
-          <div className="row">
-            <div className="token">Token</div>
-            <div className="amount">Amount</div>
-            <div className="price">Price Range</div>
-          </div>
-          <div className="body">
-            <div className="token">
-              <img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" alt="token logo" className="token-logo" />
-              BTC
+      <FloatingTooltip className="chart-tooltip" isHiddenArrow position={locationTooltipPosition}
+        content={tooltipOption === "default" && currentPointIndex > -1 && activated ?
+          <BarGraphTooltipWrapper>
+            <div className="tooltip-body">
+              <span className="date">
+                {parseTime(times[currentPointIndex]).date}
+              </span>
             </div>
-            <div className="amount">-</div>
-            <div className="price">19.30K - 21.45K ADN</div>
-          </div>
-          <div className="body">
-            <div className="token">
-              <img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" alt="token logo" className="token-logo" />
-              BTC
+            <div className="tooltip-header">
+              <span className="value">{`$${Number(BigNumber(
+                datas[currentPointIndex],
+              )).toLocaleString()}`}</span>
             </div>
-            <div className="amount">Amount</div>
-            <div className="price">0.000046 - 0.000051 BTC</div>
-          </div>
-        </IncentivizeGraphTooltipWrapper> : null
-      }>
+          </BarGraphTooltipWrapper> :
+          tooltipOption === "incentivized" && currentPointIndex > -1 && activated ?
+            <IncentivizeGraphTooltipWrapper>
+              <div className="row">
+                <div className="token">Token</div>
+                <div className="amount">Amount</div>
+                <div className="price">Price Range</div>
+              </div>
+              <div className="body">
+                <div className="token">
+                  <img src="https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg" alt="token logo" className="token-logo" />
+                  BTC
+                </div>
+                <div className="amount">-</div>
+                <div className="price">19.30K - 21.45K ADN</div>
+              </div>
+              <div className="body">
+                <div className="token">
+                  <img src="https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg" alt="token logo" className="token-logo" />
+                  BTC
+                </div>
+                <div className="amount">Amount</div>
+                <div className="price">0.000046 - 0.000051 BTC</div>
+              </div>
+            </IncentivizeGraphTooltipWrapper> : null
+        }>
         <svg viewBox={`0 0 ${width} ${height + (customHeight || 0)}`}>
           <defs>
             <linearGradient id="gradient-bar-green" x1="0" x2="0" y1="0" y2="1">