feat: [GSW-459] Integrate Pool Detail Data

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

@@ -1 +1 @@
-{"files":{".vscode":"1700971955685.2515","build":"1701592525553.2324","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":"1701592525553.2324","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":"01d1fc86a1cfcf81aa8932c52bca9738916feab5","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}}

packages/web/src/common/values/global-initial-value.ts

@@ -16,3 +16,10 @@ export const unitsUpperCase = {
   billion: "B",
   trillion: "T",
 };
+
+export const unitsLowerCase = {
+  thousand: "k",
+  million: "m",
+  billion: "b",
+  trillion: "t",
+};

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

@@ -2,7 +2,6 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import MyPositionCard from "./MyPositionCard";
-import { dummyPositionList } from "@containers/my-position-card-list-container/MyPositionCardListContainer";
 import { action } from "@storybook/addon-actions";
 
 export default {

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

@@ -120,7 +120,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
       <div className="base-border">
         <MyPositionCardWrapper
           staked={position.staked}
-          onClick={() => movePoolDetail("1")}
+          onClick={() => movePoolDetail(pool.id)}
         >
           <div className="title-wrapper">
             <div className="box-header">

packages/web/src/components/common/overlap-logo/OverlapLogo.spec.tsx

@@ -0,0 +1,19 @@
+import Overlap from "./OverlapLogo";
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+
+describe("Overlap Component", () => {
+  it("Overlap render", () => {
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <Overlap
+            logos={[]}
+            size={36}
+          />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});

packages/web/src/components/common/overlap-logo/OverlapLogo.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import OverlapLogo from "./OverlapLogo";
+
+export default {
+  title: "common/OverlapLogo",
+  component: OverlapLogo,
+} as ComponentMeta<typeof OverlapLogo>;
+
+const Template: ComponentStory<typeof OverlapLogo> = args => (
+  <OverlapLogo {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  logos: ["https://picsum.photos/id/7/36/36", "https://picsum.photos/id/101/36/36"],
+  size: 36,
+};

packages/web/src/components/common/overlap-logo/OverlapLogo.styles.ts

@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+import mixins from "@styles/mixins";
+
+export interface OverlapLogoStyleProps {
+  size?: number;
+}
+
+export const OverlapLogoWrapper = styled.div<OverlapLogoStyleProps>`
+  ${mixins.flexbox("row", "center", "center")};
+`;
+
+export interface OverlapLogoImageProps {
+  size: number;
+  overlap: number;
+}
+
+export const OverlapLogoImageWrapper = styled.div<OverlapLogoImageProps>`
+  ${mixins.flexbox("row", "center", "center")};
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+  margin-left: ${({ overlap }) => `-${overlap}px`};
+
+  img {
+    width: ${({ size }) => `${size}px`};
+    height: ${({ size }) => `${size}px`};
+    border-radius: 50%;
+  }
+`;

packages/web/src/components/common/overlap-logo/OverlapLogo.tsx

@@ -0,0 +1,23 @@
+import { OverlapLogoImageWrapper, OverlapLogoStyleProps, OverlapLogoWrapper } from "./OverlapLogo.styles";
+
+interface OverlapLogoProps extends OverlapLogoStyleProps {
+  logos: string[];
+}
+
+const OverlapLogo = ({ logos, size = 36 }: OverlapLogoProps) => {
+  return (
+    <OverlapLogoWrapper size={size}>
+      {logos.map((logo, index) =>
+        <OverlapLogoImageWrapper
+          key={index}
+          overlap={index > 0 ? (size / 3) : 0}
+          size={size}
+        >
+          <img src={logo} alt="logo-image" />
+        </OverlapLogoImageWrapper>
+      )}
+    </OverlapLogoWrapper>
+  );
+};
+
+export default OverlapLogo;

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

@@ -186,7 +186,7 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
     const mouseY = event.offsetY;
     const bin = resolvedBins.find(bin => {
       const minX = scaleX(bin.minTick);
-      const maxX = scaleX(bin.maxTick);
+      const maxX = scaleX(bin.maxTick + 1);
       if (mouseY < 1 || mouseY >= height - 1) {
         return false;
       }
@@ -210,7 +210,7 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
       max: tickOfPrices[-maxTick] || null,
     };
     const tokenAAmountStr = makeDisplayTokenAmount(tokenA, bin.reserveTokenA);
-    const tokenBAmountStr = makeDisplayTokenAmount(tokenA, bin.reserveTokenA);
+    const tokenBAmountStr = makeDisplayTokenAmount(tokenB, bin.reserveTokenB);
     setTooltipInfo({
       tokenA: tokenA,
       tokenB: tokenB,
@@ -282,14 +282,18 @@ const PoolGraph: React.FC<PoolGraphProps> = ({
   }, [width, height, scaleX, scaleY]);
 
   useEffect(() => {
-    window.addEventListener("scroll", onMouseoutChartBin);
-    return () => window.removeEventListener("scroll", onMouseoutChartBin);
-  }, []);
+    if (tooltipInfo) {
+      window.addEventListener("scroll", onMouseoutChartBin);
+      return () => window.removeEventListener("scroll", onMouseoutChartBin);
+    }
+  }, [tooltipInfo]);
 
   useEffect(() => {
-    window.addEventListener("mouseover", onMouseoverClear);
-    return () => window.removeEventListener("mouseover", onMouseoverClear);
-  }, []);
+    if (tooltipInfo) {
+      window.addEventListener("mousemove", onMouseoverClear);
+      return () => window.removeEventListener("mousemove", onMouseoverClear);
+    }
+  }, [tooltipInfo]);
 
   return (
     <PoolGraphWrapper>

packages/web/src/components/common/select-token/SelectToken.tsx

@@ -63,12 +63,12 @@ const SelectToken: React.FC<SelectTokenProps> = ({
           modalRef.current.style.transform = "translate(-50%, 0)";
         }
         setPositionTop(temp);
-        
+
       }
     };
     getPositionTop();
   }, [positionTop]);
-  
+
   return (
     <SelectTokenWrapper ref={myElementRef}>
       <div className="content">
@@ -90,9 +90,8 @@ const SelectToken: React.FC<SelectTokenProps> = ({
         <div className="token-select">
           {defaultTokens.map((token, index) => (
             <div
-              className={`token-button ${
-                themeKey === "dark" && "border-button-none"
-              }`}
+              className={`token-button ${themeKey === "dark" && "border-button-none"
+                }`}
               key={index}
               onClick={() => onClickToken(token)}
             >
@@ -103,9 +102,8 @@ const SelectToken: React.FC<SelectTokenProps> = ({
         </div>
       </div>
       <div
-        className={`token-list-wrapper ${
-          tokens.length === 0 ? "token-list-wrapper-auto-height" : ""
-        }`}
+        className={`token-list-wrapper ${tokens.length === 0 ? "token-list-wrapper-auto-height" : ""
+          }`}
       >
         {tokens.length > 0 &&
           tokens.map((token, index) => (

packages/web/src/components/earn/earn-my-positions-content/EarnMyPositionsContent.stories.tsx

@@ -1,7 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import EarnMyPositionsContent from "./EarnMyPositionsContent";
-import { PoolPosition } from "@containers/earn-my-position-container/EarnMyPositionContainer";
 
 export default {
   title: "earn/EarnMyPositionsContent",
@@ -12,66 +11,6 @@ const Template: ComponentStory<typeof EarnMyPositionsContent> = args => (
   <EarnMyPositionsContent {...args} />
 );
 
-const position: PoolPosition = {
-  tokenPair: {
-    tokenA: {
-      path: Math.floor(Math.random() * 50 + 1).toString(),
-      name: "HEX",
-      symbol: "HEX",
-      amount: {
-        value: "18,500.18",
-        denom: "gnot",
-      },
-      logoURI:
-        "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
-    },
-    tokenB: {
-      path: Math.floor(Math.random() * 50 + 1).toString(),
-      name: "USDCoin",
-      symbol: "USDC",
-      amount: {
-        value: "18,500.18",
-        denom: "gnot",
-      },
-      logoURI:
-        "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
-    },
-  },
-  rewards: [
-    {
-      token: {
-        path: Math.floor(Math.random() * 50 + 1).toString(),
-        name: "HEX",
-        symbol: "HEX",
-        amount: {
-          value: "18,500.18",
-          denom: "gnot",
-        },
-        logoURI:
-          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
-      },
-      amount: {
-        value: "18,500.18",
-        denom: "gnot",
-      },
-    },
-  ],
-  feeRate: "0.05%",
-  stakeType: "Staked",
-  value: "$18,500.10",
-  apr: "108.21%",
-  inRange: true,
-  currentPriceAmount: "1184.24 GNOS per ETH",
-  minPriceAmount: "1.75 GNOT Per GNOS",
-  maxPriceAmount: "2.25 GNOT Per GNOS",
-  currentTick: 4,
-  minTick: 40,
-  maxTick: 200,
-  minLabel: "-30%",
-  maxLabel: "50%",
-  ticks: ["1", "1", "2", "2", "3", "3", "2", "2", "1", "1"]
-};
-
 export const UnConnected = Template.bind({});
 UnConnected.args = {
   connected: false,

packages/web/src/components/earn/earn-my-positions/EarnMyPositions.stories.tsx

@@ -3,7 +3,6 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import EarnMyPositions from "./EarnMyPositions";
 import { action } from "@storybook/addon-actions";
-import { PoolPosition } from "@containers/earn-my-position-container/EarnMyPositionContainer";
 
 export default {
   title: "earn/EarnMyPositions",
@@ -14,66 +13,6 @@ const Template: ComponentStory<typeof EarnMyPositions> = args => (
   <EarnMyPositions {...args} />
 );
 
-export const position: PoolPosition = {
-  tokenPair: {
-    tokenA: {
-      path: Math.floor(Math.random() * 50 + 1).toString(),
-      name: "HEX",
-      symbol: "HEX",
-      amount: {
-        value: "18,500.18",
-        denom: "gnot",
-      },
-      logoURI:
-        "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
-    },
-    tokenB: {
-      path: Math.floor(Math.random() * 50 + 1).toString(),
-      name: "USDCoin",
-      symbol: "USDC",
-      amount: {
-        value: "18,500.18",
-        denom: "gnot",
-      },
-      logoURI:
-        "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
-    },
-  },
-  rewards: [
-    {
-      token: {
-        path: Math.floor(Math.random() * 50 + 1).toString(),
-        name: "HEX",
-        symbol: "HEX",
-        amount: {
-          value: "18,500.18",
-          denom: "gnot",
-        },
-        logoURI:
-          "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
-      },
-      amount: {
-        value: "18,500.18",
-        denom: "gnot",
-      },
-    },
-  ],
-  feeRate: "0.05%",
-  stakeType: "Staked",
-  value: "$18,500.10",
-  apr: "108.21%",
-  inRange: true,
-  currentPriceAmount: "1184.24 GNOS per ETH",
-  minPriceAmount: "1.75 GNOT Per GNOS",
-  maxPriceAmount: "2.25 GNOT Per GNOS",
-  currentTick: 20,
-  minTick: 40,
-  maxTick: 200,
-  minLabel: "-30%",
-  maxLabel: "50%",
-  ticks: ["1", "1", "3", "0", "2", "0", "4", "0", "0", "1", "2", "4", "1", "5", "1", "6", "2", "7", "0", "1", "0", "2", "5", "0", "1", "0", "5", "4", "1", "3", "0", "5", "2", "1", "1", "0", "0", "0", "0", "0"]
-};
-
 export const UnConnected = Template.bind({});
 UnConnected.args = {
   connected: false,

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

@@ -33,7 +33,7 @@ const tokens = [tokenA, tokenB];
 
 const pools = (await poolRepository.getPools());
 
-const details = (await poolRepository.getPoolDetailByPoolId()).pool;
+const details = (await poolRepository.getPoolDetailByPoolPath());
 
 const dummyDisclaimer = "This feature enables you to provide incentives as staking rewards for a specific liquidity pool. By adding incentives to the pool, you may draw more liquidity providers, which could lead to better price rates and increased trading activities.As the incentivizer, you can choose the type of the token and the duration of the rewards. The rewards will be automatically distributed by the contract and you will not be able to withdraw the tokens once the you complete this step.";
 const periods = [90, 120, 210];