Refactor/api migration (#333)

refactor: api migration and bug fixes

packages/web/src/common/values/data-constant.ts

@@ -1,10 +1,6 @@
 export type FeeOptions = "0.01%" | "0.05%" | "0.3%" | "1%";
 export type StakedOptions = "NONE" | "STAKED" | "UNSTAKING" | "UNSTAKED";
 export type LiquidityProvideOptions = "NONE" | "PROVIDED";
-export type IncentivizedOptions =
-  | "INCENTIVIZED"
-  | "NONE_INCENTIVIZED"
-  | "EXTERNAL_INCENTIVIZED";
 export type StatusOptions = "SUCCESS" | "PENDING" | "FAILED";
 export type ActiveStatusOptions = "ACTIVE" | "IN_ACTIVE" | "NONE";
 export type TokenTableSelectType = "NATIVE" | "GRC20" | "ALL";

packages/web/src/common/values/token-constant.ts

@@ -11,6 +11,7 @@ export const GNS_TOKEN: TokenModel = {
   logoURI:
     "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_gns.svg",
   priceID: "gno.land/r/demo/gns",
+  priceId: "gno.land/r/demo/gns",
   description: "GNS is a GRC20 token issued solely for testing purposes.",
   websiteURL: "https://beta.gnoswap.io",
   wrappedPath: "gno.land/r/demo/gns",
@@ -27,6 +28,7 @@ export const GNOT_TOKEN: TokenModel = {
   logoURI:
     "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/gno-native/images/gnot.svg",
   priceID: "gnot",
+  priceId: "gnot",
   address: "",
 };
 
@@ -44,6 +46,7 @@ export const GNOT_TOKEN_DEFAULT: TokenModel = {
   logoURI:
     "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/gno-native/images/gnot.svg",
   priceID: "gnot",
+  priceId: "gnot",
   description:
     "Gno.land is a platform to write smart contracts in Gnolang (Gno). Using an interpreted version of the general-purpose programming language Golang (Go), developers can write smart contracts and other blockchain apps without having to learn a language that’s exclusive to a single ecosystem. Web2 developers can easily contribute to web3 and start building a more transparent, accountable world.\n\nThe Gno transaction token, GNOT, and the contributor memberships power the platform, which runs on a variation of Proof of Stake. Proof of Contribution rewards contributors from technical and non-technical backgrounds, fairly and for life with GNOT. This consensus mechanism also achieves higher security with fewer validators, optimizing resources for a greener, more sustainable, and enduring blockchain ecosystem.\n\nAny blockchain using Gnolang achieves succinctness, composability, expressivity, and completeness not found in any other smart contract platform. By observing a minimal structure, the design can endure over time and challenge the regime of information censorship we’re living in today.",
   websiteURL: "https://gno.land/",

packages/web/src/components/common/line-graph/LineGraph.tsx

@@ -1,5 +1,5 @@
 import BigNumber from "bignumber.js";
-import React, { useCallback, useEffect, useState, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
 import { LineGraphTooltipWrapper, LineGraphWrapper } from "./LineGraph.styles";
 import FloatingTooltip from "../tooltip/FloatingTooltip";
 import { Global, css, useTheme } from "@emotion/react";
@@ -72,6 +72,7 @@ export interface LineGraphProps {
   centerLineColor?: string;
   showBaseLine?: boolean;
   renderBottom?: (baseLineNumberWidth: number) => React.ReactElement
+  isShowTooltip?: boolean;
 }
 
 export interface LineGraphRef {
@@ -142,6 +143,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
   customData = { height: 0, locationTooltip: 0 },
   showBaseLine,
   renderBottom,
+  isShowTooltip = true,
 }: LineGraphProps) => {
   const COMPONENT_ID = (Math.random() * 100000).toString();
   const [activated, setActivated] = useState(false);
@@ -152,7 +154,6 @@ const LineGraph: React.FC<LineGraphProps> = ({
   const [baseLineYAxis, setBaseLineYAxis] = useState<string[]>([]);
   const [baseLineNumberWidth, setBaseLineNumberWidth] = useState<number>(0);
   const { height: customHeight = 0, locationTooltip } = customData;
-  const chartRef = useRef<SVGGElement | null>(null);
   const baseLineCount = useMemo(() => 4, []);
   const theme = useTheme();
 
@@ -162,7 +163,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
 
   useEffect(() => {
     updatePoints(datas, width, height);
-  }, [datas, width, height]);
+  }, [datas, width, height, baseLineNumberWidth]);
 
   const updatePoints = (
     datas: LineGraphData[],
@@ -185,11 +186,16 @@ const LineGraph: React.FC<LineGraphProps> = ({
 
     let baseLineNumberWidthComputation = 0;
 
+    const minMaxGap = (maxValue - minValue) !== 0 ? (maxValue - minValue) : (maxValue * gapRatio);
+
     if (showBaseLine) {
       const baseLineData = new Array(baseLineCount).fill("").map((value, index) => {
-        const minMaxGap = maxValue - minValue;
-        const additionalGap = minMaxGap * (gapRatio / 2);
-        const baseLineGap = minMaxGap * (1 + gapRatio);
+
+        // Gap from lowest value or highest value  to baseline
+        const additionalGap = (maxValue - minValue !== 0) ? minMaxGap * (gapRatio / 2) : (minMaxGap / 2);
+        // Gap between bottom and top base line
+        const baseLineGap = (maxValue - minValue !== 0) ? minMaxGap * (1 + gapRatio) : minMaxGap;
+        // Lowest baseline value
         const bottomBaseLineValue = minValue - additionalGap;
 
         const currentBaseLineValue = bottomBaseLineValue + (index / (baseLineCount - 1)) * baseLineGap;
@@ -229,27 +235,31 @@ const LineGraph: React.FC<LineGraphProps> = ({
 
     const optimizeValue = function (value: number, height: number) {
       // The base line wrapper will > top and bottom of graph 10 % so the height will be 110% of graph height
-      const graphHeight = showBaseLine ? height * (1 / 1.1) : height;
+      const graphHeight = (() => {
+        if (showBaseLine) {
+          return height * (1 / 1.1);
+        }
+
+        return height;
+      })();
 
       // Subtract 5% from the top baseline
       const topFrontierHeight = showBaseLine ? height * (1.05 / 1.1) : height;
 
-      return (
-        // (top frontier height) - (distance from point to bottom) = (point top top)
-        topFrontierHeight -
-        // gap between point and bottom
-        new BigNumber(value - minValue)
-          // gap ratio between gap to bottom and largest gap (max - min)
-          .dividedBy(maxValue - minValue)
-          // precise distance from point to bottom
-          .multipliedBy(graphHeight)
-          .toNumber()
-      );
+      const result = (() => {
+        if (maxValue - minValue === 0) {
+          return topFrontierHeight - ((value - (value * 0.95)) * graphHeight) / minMaxGap;
+        }
+
+        return topFrontierHeight - ((value - minValue) * graphHeight) / minMaxGap;
+      })();
+
+      return result;
     };
 
     const optimizeTime = function (time: number, width: number) {
       return new BigNumber(time - minTime)
-        .multipliedBy(width - baseLineNumberWidthComputation)
+        .multipliedBy((width) - baseLineNumberWidthComputation)
         .dividedBy(maxTime - minTime)
         .toNumber();
     };
@@ -408,7 +418,6 @@ const LineGraph: React.FC<LineGraphProps> = ({
     return path;
   }, [height, points, smooth]);
 
-  const offsetPixel = useMemo(() => 3, []);
   const isLightTheme = theme.themeKey === "light";
 
   return (
@@ -425,7 +434,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
         isHiddenArrow
         position={locationTooltipPosition}
         content={
-          currentPointIndex > -1 ? (
+          (isShowTooltip && currentPointIndex > -1) ? (
             <LineGraphTooltipWrapper>
               <div className="tooltip-body">
                 <span className="date">
@@ -457,15 +466,15 @@ const LineGraph: React.FC<LineGraphProps> = ({
                 : <stop offset="100%" stopColor={gradientEndColor} />}
             </linearGradient>
           </defs>
-          <g ref={chartRef} height={height + (customHeight || 0)} width={width} className="line-chart-g">
+          <g width={width} className="line-chart-g">
             {showBaseLine && <>
               {
                 baseLineYAxis.map((value, index) => {
                   const currentHeight = height - (height * index / (baseLineCount - 1));
 
                   return <>
                     <line x1={baseLineNumberWidth} x2={width} y1={currentHeight} y2={currentHeight} stroke="grey" stroke-width="1" strokeDasharray={3} opacity={0.2} />
-                    <text className="y-axis-number" x="" y={currentHeight + offsetPixel} fill={theme.color.text04}>{value}</text>
+                    <text alignmentBaseline="central" className="y-axis-number" x="" y={currentHeight} fill={theme.color.text04}>{value}</text>
                   </>;
                 })
               }

packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx

@@ -29,6 +29,7 @@ const token: TokenModel = {
   logoURI:
     "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg",
   priceID: "gno.land/r/foo",
+  priceId: "gno.land/r/foo",
   address: "",
 };
 

packages/web/src/components/common/my-position-card/MyPositionCard.tsx

@@ -108,19 +108,18 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
   const minTickLabel = useMemo(() => {
     return minTickRate * -1 > 1000
       ? ">999%"
-      : `${minTickRate < 0 ? "+" : ""}${
-          Math.abs(minTickRate) > 0 && Math.abs(minTickRate) < 1
-            ? "<1"
-            : Math.round(minTickRate * -1)
-        }%`;
+      : `${minTickRate < 0 ? "+" : ""}${Math.abs(minTickRate) > 0 && Math.abs(minTickRate) < 1
+        ? "<1"
+        : Math.round(minTickRate * -1)
+      }%`;
   }, [minTickRate]);
 
   const maxTickLabel = useMemo(() => {
     return maxTickRate === 999
       ? `>${maxTickRate}%`
       : maxTickRate >= 1000
-      ? ">999%"
-      : `${maxTickRate > 0 && maxTickRate >= 1 ? "+" : ""}${Math.abs(maxTickRate) < 1 ? "<1" : Math.round(maxTickRate)}%`;
+        ? ">999%"
+        : `${maxTickRate > 0 && maxTickRate >= 1 ? "+" : ""}${Math.abs(maxTickRate) < 1 ? "<1" : Math.round(maxTickRate)}%`;
   }, [maxTickRate]);
 
   const tickRange = useMemo(() => {
@@ -143,7 +142,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
     }
     return (
       ((position.tickLower - currentTick) / (max - currentTick)) *
-        (GRAPH_WIDTH / 2) +
+      (GRAPH_WIDTH / 2) +
       GRAPH_WIDTH / 2
     );
   }, [GRAPH_WIDTH, position.pool.currentTick, position.tickLower, tickRange]);
@@ -161,7 +160,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
     }
     return (
       ((position.tickUpper - currentTick) / (max - currentTick)) *
-        (GRAPH_WIDTH / 2) +
+      (GRAPH_WIDTH / 2) +
       GRAPH_WIDTH / 2
     );
   }, [GRAPH_WIDTH, position.pool.currentTick, position.tickUpper, tickRange]);
@@ -246,9 +245,9 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
     return maxTickRate > 0 ? "positive" : "negative";
   }, [getMaxTick, maxTickRate]);
   const claimableUSD = useMemo(() => {
-    const temp = position.rewards.reduce((acc, cur) => Number(cur.claimableUsdValue) + acc, 0);
+    const temp = position.reward.reduce((acc, cur) => Number(cur.claimableUsd) + acc, 0);
     return toUnitFormat(temp, true, true);
-  }, [position.rewards]);
+  }, [position.reward]);
   return (
     <MyPositionCardWrapperBorder
       className={`${position.staked && inRange !== null ? "special-card" : ""}`}
@@ -281,8 +280,8 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
                 inRange === null
                   ? RANGE_STATUS_OPTION.NONE
                   : inRange
-                  ? RANGE_STATUS_OPTION.IN
-                  : RANGE_STATUS_OPTION.OUT
+                    ? RANGE_STATUS_OPTION.IN
+                    : RANGE_STATUS_OPTION.OUT
               }
             />
           </div>
@@ -331,7 +330,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
                 maxLabel={maxTickLabel}
                 minTick={minTickPosition}
                 maxTick={maxTickPosition}
-                bins={position.bins}
+                bins={pool.bins40}
                 tokenA={tokenA}
                 tokenB={tokenB}
                 isHiddenStart={isHiddenStart}
@@ -340,7 +339,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
                 minTickRate={minTickRate}
                 maxTickRate={maxTickRate}
                 pool={pool}
-                binsMyAmount={position.bins}
+                binsMyAmount={position.bins40}
               />
             </div>
             <div className="min-max-price">

packages/web/src/components/common/notification-button/NotificationButton.tsx

@@ -7,7 +7,7 @@ import { CommonState } from "@states/index";
 import { DEVICE_TYPE } from "@styles/media";
 import useEscCloseModal from "@hooks/common/use-esc-close-modal";
 import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useWallet } from "@hooks/wallet/use-wallet";
 import { useMemo } from "react";
 import { usePreventScroll } from "@hooks/common/use-prevent-scroll";
@@ -31,6 +31,16 @@ const NotificationButton = ({ breakpoint }: { breakpoint: DEVICE_TYPE }) => {
   };
   useEscCloseModal(handleESC);
   usePreventScroll(toggle.notification);
+
+  const clearNotificationMutation = useMutation({
+    onSuccess: () => {
+      refetch();
+    },
+    mutationFn: () => notificationRepository.getGroupedNotification({
+      address: account?.address,
+    })
+  });
+
   const { data: txsGroupsInformation, refetch, isFetched } = useQuery<
     TransactionGroupsType[],
     Error
@@ -51,6 +61,7 @@ const NotificationButton = ({ breakpoint }: { breakpoint: DEVICE_TYPE }) => {
   }, [txsGroupsInformation]);
   const handleClearAll = () => {
     notificationRepository.appendRemovedTx(txs);
+    clearNotificationMutation.mutate();
     refetch();
   };
 

packages/web/src/components/common/notification-list/NotificationItem.tsx

@@ -66,7 +66,7 @@ const NotificationItem: React.FC<ItemProps> = ({ groups, breakpoint }) => {
                     />
                   </DoubleLogo>
                 )}
-                <div className="content-wrap" dangerouslySetInnerHTML={{ __html: item.content || ""}} />
+                <div className="content-wrap" dangerouslySetInnerHTML={{ __html: item.content || "" }} />
               </div>
             </div>
             {item.status === "SUCCESS" ? (
@@ -116,7 +116,7 @@ const NotificationItem: React.FC<ItemProps> = ({ groups, breakpoint }) => {
                 />
               </DoubleLogoWrapperTest>
             )}
-            <div className="summary-content" dangerouslySetInnerHTML={{ __html: item.content || ""}} />
+            <div className="summary-content" dangerouslySetInnerHTML={{ __html: item.content || "" }} />
             {item.status === "SUCCESS" ? (
               <IconCircleInCheck className="success-icon status-icon" />
             ) : item.status === "FAILED" ? (

packages/web/src/components/common/pair-ratio/PairRatio.tsx

@@ -1,39 +1,51 @@
 import { pulseSkeletonStyle } from "@constants/skeleton.constant";
 import { SkeletonEarnDetailWrapper } from "@layouts/pool-layout/PoolLayout.styles";
-import { TokenModel } from "@models/token/token-model";
+import { PoolModel } from "@models/pool/pool-model";
 import { formatExchangeRate } from "@utils/number-utils";
+import { useMemo } from "react";
 import IconSwap from "../icons/IconSwap";
 import MissingLogo from "../missing-logo/MissingLogo";
 import { PairRatioWrapper } from "./PairRatio.styles";
 
+function replaceGnotSymbol(symbol: string) {
+  if (symbol === "WGNOT") return "GNOT";
+  return symbol;
+}
+
 interface PairRatioProps {
   loading?: boolean;
   onSwap?: (swap: boolean) => void;
   isSwap?: boolean;
-  tokenA: TokenModel;
-  tokenB: TokenModel;
   showSwapBtn?: boolean;
-  feeTier: string;
+  pool: PoolModel;
 }
 
 export function PairRatio({
   loading = false,
   isSwap = false,
   onSwap,
-  tokenA,
-  tokenB,
   showSwapBtn,
+  pool,
 }: PairRatioProps) {
+  const displayTokenSymbol = useMemo(
+    () => replaceGnotSymbol(!isSwap ? pool.tokenA?.symbol : pool.tokenB?.symbol),
+    [isSwap, pool.tokenA?.symbol, pool.tokenB?.symbol],
+  );
+  const secondTokenSymbol = useMemo(
+    () => replaceGnotSymbol(isSwap ? pool.tokenA?.symbol : pool.tokenB?.symbol),
+    [isSwap, pool.tokenA?.symbol, pool.tokenB?.symbol],
+  );
+
   return (<PairRatioWrapper>
     {!loading && (
       <MissingLogo
-        symbol={!isSwap ? tokenA?.symbol : tokenB?.symbol}
-        url={!isSwap ? tokenA?.logoURI : tokenB?.logoURI}
+        symbol={displayTokenSymbol}
+        url={!isSwap ? pool.tokenA?.logoURI : pool.tokenB?.logoURI}
         width={20}
         className="image-logo"
       />
     )}
-    {!loading && <div>1 {tokenA.symbol} =&nbsp;{formatExchangeRate(1.123812783)}&nbsp;{tokenB.symbol}</div>}
+    {!loading && <div>1 {displayTokenSymbol} =&nbsp;{formatExchangeRate(pool.price)}&nbsp;{secondTokenSymbol}</div>}
     {showSwapBtn && !loading && (
       <div
         className="icon-wrapper"