Merge pull request #238 from gnoswap-labs/GSW-458-integrate-pool-list…

…-data

feat: [GSW-458] feat: Integrate Pool Card data

packages/swap-router/.ultra.cache.json

@@ -1 +1 @@
-{"files":{".vscode":"1700971955685.2515","build":"1701256570289.2512","node_modules":"1700891704503.8325",".eslintignore":"7de3bd702df2dee92c033c49abbedd0b0f7452e6",".eslintrc.js":"ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",".gitignore":"c87c9b392c0200d9c9dafc444386ad3e15a85c64",".prettierignore":"47bb4656eb55860a075be7799cba7fa955b68141",".prettierrc":"fe5f744c7a08b128c935d1e1aed3e8a577e74507","jest.config.json":"2e496ee6bd64eb237161dcd69a6957eff2df584d","package.json":"4dda70ca76fb6022f6cb20852ecd8d2d95d638d2","src/common/array.util.ts":"9482ab121d34cc7e08a0cd33b49173b0b85823d8","src/common/bigint.util.ts":"343f4c85ca1f6c840ade68c259ed82bf5b159fb0","src/common/index.ts":"861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd","src/common/mapper.ts":"f7d7b491dff443911a978b34e4cb378bee46c2b7","src/common/queue.ts":"ad096fefbe1c5a7339b536b0b8d39dba661b520e","src/common/test.util.ts":"3e500df6ec27ba98606acbfcaec9243e22862e43","src/constants/index.ts":"9605b149deb525c25f6e93420bbc433ff1c75cd0","src/constants/math.constant.ts":"b617851527cabcc9c3bce2c8e39208001d379ad6","src/constants/swap.constant.ts":"53e280147c68acfba490bc1f9a0b7bb1580e7280","src/index.ts":"691efb21a28bd3f0e6437edcb16192789dbbb7f6","src/swap-router/index.ts":"effaf28a826bdf1441437643e8343e7fbd8026b1","src/swap-router/swap-router-default.spec.ts":"f980bc94753df130c950eb80d8709b62ec3276fa","src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts":"683ce3a82d73e915018e772723700905c3ff7c92","src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts":"93bfd18d0a297f3c66743cddcf2fe10c3764e250","src/swap-router/swap-router-multi-pair-pools.spec.ts":"5fbd55be39012d46adbdc91a1111dca2aafd314d","src/swap-router/swap-router-multi-route.spec.ts":"771df497876b6bc027dc7b65d03e53209538bf2e","src/swap-router/swap-router-single-pair-pools.spec.ts":"3954e9057ef9534a3724dc960c291281d1a4ef52","src/swap-router/swap-router.ts":"606de3d518665d58f5cbafb55f45d92c30dab77d","src/swap-router/swap-router.types.ts":"2a48987217df238256a0721d227952142a37ce08","src/swap-router/utility/index.ts":"4973874904dd9d77d037d72b1ec8aed397716a38","src/swap-router/utility/route.util.ts":"d492418c9184e42d3ef29d7760eb18fa013f54c6","src/swap-simulator/index.ts":"ef493c5977bdf1123d1197b804f2344ee463870c","src/swap-simulator/swap-simulator-default.spec.ts":"867788b12ccc70abe676010aeed5d6b2b58e8036","src/swap-simulator/swap-simulator.ts":"48cc4c90a2622d806659fa2f8c4f48d600a2b2db","src/swap-simulator/swap-simulator.types.ts":"2b03d7e389ab8875852330c8fddf5a9bfe96f1c6","src/swap-simulator/utility/cache.util.ts":"c5af86d350610a80a6690846657a35635bbc752a","src/swap-simulator/utility/index.ts":"7272f5d23dfa7af2895fca9bb0b17985234ab6e1","src/swap-simulator/utility/math.util.ts":"96fbe38cbabe344f6f58220f46c20103e6df4225","src/swap-simulator/utility/swap-util.spec.ts":"b7fe082f3fef7e5a912959925924f56f8c36e020","src/swap-simulator/utility/swap.util.ts":"f49236f0d22f72b9283244e870d34401d42fe009","src/swap-simulator/utility/tick.util.ts":"4d9bf8ed782f07587c71009ad13cd249b5e3a840","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}}
+{"files":{".vscode":"1700971955685.2515","build":"1701412916671.3086","node_modules":"1700891704503.8325",".eslintignore":"7de3bd702df2dee92c033c49abbedd0b0f7452e6",".eslintrc.js":"ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",".gitignore":"c87c9b392c0200d9c9dafc444386ad3e15a85c64",".prettierignore":"47bb4656eb55860a075be7799cba7fa955b68141",".prettierrc":"fe5f744c7a08b128c935d1e1aed3e8a577e74507","jest.config.json":"2e496ee6bd64eb237161dcd69a6957eff2df584d","package.json":"4dda70ca76fb6022f6cb20852ecd8d2d95d638d2","src/common/array.util.ts":"9482ab121d34cc7e08a0cd33b49173b0b85823d8","src/common/bigint.util.ts":"343f4c85ca1f6c840ade68c259ed82bf5b159fb0","src/common/index.ts":"861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd","src/common/mapper.ts":"f7d7b491dff443911a978b34e4cb378bee46c2b7","src/common/queue.ts":"ad096fefbe1c5a7339b536b0b8d39dba661b520e","src/common/test.util.ts":"3e500df6ec27ba98606acbfcaec9243e22862e43","src/constants/index.ts":"9605b149deb525c25f6e93420bbc433ff1c75cd0","src/constants/math.constant.ts":"b617851527cabcc9c3bce2c8e39208001d379ad6","src/constants/swap.constant.ts":"53e280147c68acfba490bc1f9a0b7bb1580e7280","src/index.ts":"691efb21a28bd3f0e6437edcb16192789dbbb7f6","src/swap-router/index.ts":"effaf28a826bdf1441437643e8343e7fbd8026b1","src/swap-router/swap-router-default.spec.ts":"f980bc94753df130c950eb80d8709b62ec3276fa","src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts":"683ce3a82d73e915018e772723700905c3ff7c92","src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts":"93bfd18d0a297f3c66743cddcf2fe10c3764e250","src/swap-router/swap-router-multi-pair-pools.spec.ts":"5fbd55be39012d46adbdc91a1111dca2aafd314d","src/swap-router/swap-router-multi-route.spec.ts":"771df497876b6bc027dc7b65d03e53209538bf2e","src/swap-router/swap-router-single-pair-pools.spec.ts":"3954e9057ef9534a3724dc960c291281d1a4ef52","src/swap-router/swap-router.ts":"606de3d518665d58f5cbafb55f45d92c30dab77d","src/swap-router/swap-router.types.ts":"2a48987217df238256a0721d227952142a37ce08","src/swap-router/utility/index.ts":"4973874904dd9d77d037d72b1ec8aed397716a38","src/swap-router/utility/route.util.ts":"d492418c9184e42d3ef29d7760eb18fa013f54c6","src/swap-simulator/index.ts":"ef493c5977bdf1123d1197b804f2344ee463870c","src/swap-simulator/swap-simulator-default.spec.ts":"867788b12ccc70abe676010aeed5d6b2b58e8036","src/swap-simulator/swap-simulator.ts":"48cc4c90a2622d806659fa2f8c4f48d600a2b2db","src/swap-simulator/swap-simulator.types.ts":"2b03d7e389ab8875852330c8fddf5a9bfe96f1c6","src/swap-simulator/utility/cache.util.ts":"c5af86d350610a80a6690846657a35635bbc752a","src/swap-simulator/utility/index.ts":"7272f5d23dfa7af2895fca9bb0b17985234ab6e1","src/swap-simulator/utility/math.util.ts":"96fbe38cbabe344f6f58220f46c20103e6df4225","src/swap-simulator/utility/swap-util.spec.ts":"b7fe082f3fef7e5a912959925924f56f8c36e020","src/swap-simulator/utility/swap.util.ts":"f49236f0d22f72b9283244e870d34401d42fe009","src/swap-simulator/utility/tick.util.ts":"4d9bf8ed782f07587c71009ad13cd249b5e3a840","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}}

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

@@ -1,8 +1,9 @@
 import PoolGraph, { type PoolGraphProps } from "./PoolGraph";
 import { Meta, StoryObj } from "@storybook/react";
 import POOLS from "@repositories/pool/mock/pools.json";
+import { PoolModel } from "@models/pool/pool-model";
 
-const pool = POOLS.pools[0];
+const pool = POOLS.pools[0] as PoolModel;
 
 export default {
   title: "common/PoolGraph",

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

@@ -3,7 +3,6 @@ import { PoolGraphWrapper } from "./PoolGraph.styles";
 import * as d3 from "d3";
 import { PoolBinModel } from "@models/pool/pool-bin-model";
 import { MAX_TICK, MIN_TICK } from "@constants/swap.constant";
-import BigNumber from "bignumber.js";
 import { renderToStaticMarkup } from "react-dom/server";
 import { TokenModel } from "@models/token/token-model";
 import { toMillionFormat } from "@utils/number-utils";
@@ -86,8 +85,8 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
   const xAxis = d3
     .axisBottom(scaleX)
     .tickSize(0)
-    .tickFormat(v => BigNumber(1.001 ** (v.valueOf() / 2)).toFormat(4));
-  const [minX, maxX] = d3.extent(bins, (bin) => bin.currentTick);
+    .tickFormat(v => v.toString());
+  const [minX, maxX] = d3.extent(bins, (bin) => bin.minTick);
   const [, max] = d3.extent(bins, (bin) => bin.liquidity);
 
   const scaleY = useMemo(() => {
@@ -152,7 +151,7 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
     if (bins.length === 2) {
       return 20;
     }
-    const spacing = scaleX(bins[1].currentTick) - scaleX(bins[0].currentTick);
+    const spacing = scaleX(bins[1].minTick) - scaleX(bins[0].minTick);
     if (spacing < 2) {
       return spacing;
     }
@@ -166,7 +165,7 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
 
     // Retrieves the colour of the chart bar at the current tick.
     function fillByBin(bin: PoolBinModel) {
-      if (currentTick && scaleX(bin.currentTick) < centerPosition) {
+      if (currentTick && (bin.minTick) < currentTick) {
         return "url(#gradient-bar-green)";
       }
       return "url(#gradient-bar-red)";
@@ -184,7 +183,7 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
       .append("rect")
       .style("fill", bin => fillByBin(bin))
       .attr("class", "rects")
-      .attr("x", bin => scaleX(bin.currentTick))
+      .attr("x", bin => scaleX(bin.minTick))
       .attr("y", bin => scaleY(bin.liquidity))
       .attr("width", tickSpacing)
       .attr("height", bin => boundsHeight - scaleY(bin.liquidity))
@@ -227,8 +226,8 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
           <PoolGraphBinTooptip
             tokenA={tokenA}
             tokenB={tokenB}
-            tokenAAmount={bin.tokenAAmount}
-            tokenBAmount={bin.tokenBAmount}
+            tokenAAmount={bin.reserveTokenA}
+            tokenBAmount={bin.reserveTokenB}
             tokenARange={tokenARange}
             tokenBRange={tokenBRange}
           />

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

@@ -3,6 +3,7 @@ import PoolSelectionGraph, { type PoolSelectionGraphProps } from "./PoolSelectio
 import { ComponentStory, Meta, StoryObj } from "@storybook/react";
 import POOLS from "@repositories/pool/mock/pools.json";
 import { tickToPrice } from "@utils/swap-utils";
+import { PoolModel } from "@models/pool/pool-model";
 
 
 const test = [
@@ -1832,7 +1833,7 @@ const test = [
   }
 ];
 
-const pool = POOLS.pools[0];
+const pool = POOLS.pools[0] as PoolModel;
 
 export default {
   title: "common/PoolSelectionGraph",

packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx

@@ -156,16 +156,16 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
   const boundsHeight = height - margin.top - margin.bottom - labelHeight - paddingHeight;
   const tickAmount = 10000;
 
-  const [, maxX] = d3.extent(bins.map(bin => bin.currentTick));
+  const [, maxX] = d3.extent(bins.map(bin => bin.minTick));
   const maxXTick = tickToPrice(maxX ?? 1) * 10000;
   const binRange = maxXTick / tickAmount;
   const currentPrice = tickToPrice(currentTick || 0);
 
   const { redColor, greenColor } = useColorGraph();
 
   const resolvedBins = () => {
-    const sortedBins = bins.sort((b1, b2) => b1.currentTick - b2.currentTick)
-      .map(bin => ({ ...bin, currentPrice: tickToPrice(bin.currentTick) }));
+    const sortedBins = bins.sort((b1, b2) => b1.minTick - b2.minTick)
+      .map(bin => ({ ...bin, currentPrice: tickToPrice(bin.minTick) }));
     console.log(sortedBins);
     return Array.from(
       { length: tickAmount },

packages/web/src/components/earn/earn-incentivized-pools/EarnIncentivizedPools.stories.tsx

@@ -4,8 +4,9 @@ import IncentivizedPoolCardList from "../incentivized-pool-card-list/Incentivize
 import POOLS from "@repositories/pool/mock/pools.json";
 import { PoolMapper } from "@models/pool/mapper/pool-mapper";
 import { action } from "@storybook/addon-actions";
+import { PoolModel } from "@models/pool/pool-model";
 
-const pool = POOLS.pools[0];
+const pool = POOLS.pools[0] as PoolModel;
 
 const cardInfo = PoolMapper.toCardInfo(pool);
 

packages/web/src/components/earn/incentivized-pool-card-list/IncentivizedPoolCardList.stories.tsx

@@ -5,8 +5,9 @@ import IncentivizedPoolCardList from "./IncentivizedPoolCardList";
 import { action } from "@storybook/addon-actions";
 import POOLS from "@repositories/pool/mock/pools.json";
 import { PoolMapper } from "@models/pool/mapper/pool-mapper";
+import { PoolModel } from "@models/pool/pool-model";
 
-const pool = POOLS.pools[0];
+const pool = POOLS.pools[0] as PoolModel;
 
 const cardInfo = PoolMapper.toCardInfo(pool);
 

packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.stories.tsx

@@ -5,8 +5,9 @@ import IncentivizedPoolCard from "./IncentivizedPoolCard";
 import { action } from "@storybook/addon-actions";
 import POOLS from "@repositories/pool/mock/pools.json";
 import { PoolMapper } from "@models/pool/mapper/pool-mapper";
+import { PoolModel } from "@models/pool/pool-model";
 
-const pool = POOLS.pools[0];
+const pool = POOLS.pools[0] as PoolModel;
 
 const cardInfo = PoolMapper.toCardInfo(pool);
 

packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.tsx

@@ -86,8 +86,8 @@ const IncentivizedPoolCard: React.FC<IncentivizedPoolCardProps> = ({
               <PoolGraph
                 tokenA={pool.tokenA}
                 tokenB={pool.tokenB}
-                bins={[]}
-                currentTick={20}
+                bins={pool.bins}
+                currentTick={pool.currentTick}
                 width={258}
                 height={80.62}
                 mouseover

packages/web/src/components/earn/pool-info/PoolInfo.stories.tsx

@@ -51,7 +51,7 @@ const pool: PoolCardInfo = {
       amount: 10
     }
   ],
-  incentiveType: "Incentivized",
+  incentivizedType: "INCENTIVIZED",
   currentTick: 0,
   price: 0,
   bins: []

packages/web/src/components/earn/pool-list-table/PoolListTable.stories.tsx

@@ -5,8 +5,9 @@ import PoolListTable from "./PoolListTable";
 import { action } from "@storybook/addon-actions";
 import POOLS from "@repositories/pool/mock/pools.json";
 import { PoolMapper } from "@models/pool/mapper/pool-mapper";
+import { PoolModel } from "@models/pool/pool-model";
 
-const pool = POOLS.pools[0];
+const pool = POOLS.pools[0] as PoolModel;
 
 const listInfo = PoolMapper.toListInfo(pool);
 

packages/web/src/components/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.stories.tsx

@@ -5,7 +5,7 @@ import { PoolRepositoryMock } from "@repositories/pool";
 import { PoolMapper } from "@models/pool/mapper/pool-mapper";
 
 const poolRepository = new PoolRepositoryMock();
-const pools = (await poolRepository.getPools()).pools;
+const pools = (await poolRepository.getPools());
 
 const Template: React.FC<PoolIncentivizeSelectPoolItemProps> = (args) => {
   return (

packages/web/src/components/incentivize/pool-incentivize-select-pool/PoolIncentivizeSelectPool.stories.tsx

@@ -6,7 +6,7 @@ import { PoolSelectItemInfo } from "@models/pool/info/pool-select-item-info";
 import { PoolMapper } from "@models/pool/mapper/pool-mapper";
 
 const poolRepository = new PoolRepositoryMock();
-const pools = (await poolRepository.getPools()).pools.map(PoolMapper.toPoolSelectItemInfo);
+const pools = (await poolRepository.getPools()).map(PoolMapper.toPoolSelectItemInfo);
 
 export default {
   title: "incentivize/PoolIncentivizeSelectPool",

packages/web/src/components/incentivize/pool-incentivize/PoolIncentivize.stories.tsx

@@ -31,7 +31,7 @@ const tokenB = {
 const tokens = [tokenA, tokenB];
 
 
-const pools = (await poolRepository.getPools()).pools;
+const pools = (await poolRepository.getPools());
 
 const details = (await poolRepository.getPoolDetailByPoolId()).pool;
 

packages/web/src/constants/option.constant.ts

@@ -112,11 +112,6 @@ export const CHART_TYPE = {
 } as const;
 export type CHART_TYPE = ValuesType<typeof CHART_TYPE>;
 
-export type IncentivizedOptions =
-  | "INCENTIVIZED"
-  | "NON_INCENTIVIZED"
-  | "EXTERNAL_INCENTIVIZED";
-
 export type AddLiquidityType = "POOL" | "LIQUIDITY";
 
 export type PriceRangeType = "Active" | "Passive" | "Custom";

packages/web/src/constants/swap.constant.ts

@@ -1,8 +1,9 @@
-export const MIN_PRICE_X96 = "4295128740";
-export const MAX_PRICE_X96 =
-  "1461446703485210103287273052203988822378723970341";
+export const MIN_PRICE_X96 = 4295128740n;
+export const MAX_PRICE_X96 = 1461446703485210103287273052203988822378723970341n;
 
 export const MIN_TICK = -887272 as const;
 export const MAX_TICK = 887272 as const;
 
 export const X96 = 7.9228163e28 as const;
+export const Q96 = 79228162514264337593543950336n as const;
+export const Q128 = 340282366920938463463374607431768211456n as const;

packages/web/src/containers/pool-add-incentivize-container/PoolAddIncentivizeContainer.tsx

@@ -16,7 +16,7 @@ import { useWallet } from "@hooks/wallet/use-wallet";
 export const dummyDisclaimer =
   "This feature enables you to provide incentives as staking rewards for a specific liquidity pool. Before you proceed, ensure that you understand the mechanics of external incentives and acknowledge that you cannot withdraw the rewards once you complete this step.<br /><br />The incentives you add will be automatically distributed by the contract and may draw more liquidity providers.";
 
-const pools: PoolModel[] = POOLS.pools;
+const pools = POOLS.pools as PoolModel[];
 const tokenBalances: TokenBalanceInfo[] = [];
 const periods = [90, 180, 365];
 
@@ -34,7 +34,7 @@ const PoolAddIncentivizeContainer: React.FC = () => {
   const [token, setToken] = useState<TokenModel | null>(null);
   const tokenAmountInput = useTokenAmountInput(token);
   const { updateTokenPrices } = useTokenData();
-  
+
   useEffect(() => {
     setPool(pools[0]);
   }, []);
@@ -54,7 +54,7 @@ const PoolAddIncentivizeContainer: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    setPoolDetail(PoolDetailData.pool);
+    setPoolDetail(PoolDetailData.pool as PoolDetailModel);
   }, []);
 
   const selectPool = useCallback((poolId: string) => {
@@ -63,7 +63,7 @@ const PoolAddIncentivizeContainer: React.FC = () => {
       setCurrentPool(pool);
     }
   }, [setCurrentPool]);
-  
+
   const selectToken = useCallback((path: string) => {
     const token = tokenBalances.find(token => token.path === path);
     if (token) {

packages/web/src/containers/pool-incentivize-container/PoolIncentivizeContainer.tsx

@@ -16,7 +16,7 @@ import { useWallet } from "@hooks/wallet/use-wallet";
 export const dummyDisclaimer =
   "This feature enables you to provide incentives as staking rewards for a specific liquidity pool. Before you proceed, ensure that you understand the mechanics of external incentives and acknowledge that you cannot withdraw the rewards once you complete this step.<br /><br />The incentives you add will be automatically distributed by the contract and may draw more liquidity providers.";
 
-const pools: PoolModel[] = POOLS.pools;
+const pools: PoolModel[] = POOLS.pools as PoolModel[];
 const tokenBalances: TokenBalanceInfo[] = [];
 const periods = [90, 180, 365];
 
@@ -33,7 +33,7 @@ const PoolIncentivizeContainer: React.FC = () => {
   const [token, setToken] = useState<TokenModel | null>(null);
   const tokenAmountInput = useTokenAmountInput(token);
   const { updateTokenPrices } = useTokenData();
-  
+
   useEffect(() => {
     setDataModal(tokenAmountInput);
   }, [tokenAmountInput.amount, token]);
@@ -50,7 +50,7 @@ const PoolIncentivizeContainer: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    setPoolDetail(PoolDetailData.pool);
+    setPoolDetail(PoolDetailData.pool as PoolDetailModel);
   }, []);
 
   const selectPool = useCallback((poolId: string) => {
@@ -59,7 +59,7 @@ const PoolIncentivizeContainer: React.FC = () => {
       setCurrentPool(pool);
     }
   }, [setCurrentPool]);
-  
+
   const selectToken = useCallback((path: string) => {
     const token = tokenBalances.find(token => token.path === path);
     if (token) {