[GSW-416] feat: Integrate Pools API

packages/web/.env.example

@@ -1 +1,5 @@
-NEXT_PUBLIC_API_URL="https://mock-api.gnoswap.io/v3/testnet"
+NEXT_PUBLIC_API_URL="https://dev-api.gnoswap.io/v3/testnet"
+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"

packages/web/src/components/common/select-fee-tier/SelectFeeTier.tsx

@@ -55,8 +55,7 @@ const SelectFeeTierItem: React.FC<SelectFeeTierItemProps> = ({
   }, [feeTier]);
 
   const rangeStr = useMemo(() => {
-    const fee = SwapFeeTierInfoMap[feeTier].fee;
-    const pool = pools.find(pool => pool.fee === fee);
+    const pool = pools.find(pool => pool.fee === feeTier);
     if (!pool || pool.bins.length < 2) {
       return "Not created";
     }

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

@@ -1,8 +1,61 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import EarnIncentivizedPools from "./EarnIncentivizedPools";
 import IncentivizedPoolCardList from "../incentivized-pool-card-list/IncentivizedPoolCardList";
-import { poolDummy } from "../incentivized-pool-card-list/incentivized-pool-dummy";
-import { action } from '@storybook/addon-actions';
+
+import { PoolCardInfo } from "@models/pool/info/pool-card-info";
+import { action } from "@storybook/addon-actions";
+
+const pool: PoolCardInfo = {
+  poolId: "bar_foo_500",
+  tokenA: {
+    chainId: "dev",
+    createdAt: "2023-10-12T06:56:10+09:00",
+    name: "Bar",
+    address: "g1w8wqgrp08cqhtupzx98n4jtm8kqy7vadfmmyd0",
+    path: "gno.land/r/bar",
+    decimals: 4,
+    symbol: "BAR",
+    logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+    priceId: "gno.land/r/bar"
+  },
+  tokenB: {
+    chainId: "dev",
+    createdAt: "2023-10-12T06:56:08+09:00",
+    name: "Foo",
+    address: "g1evezrh92xaucffmtgsaa3rvmz5s8kedffsg469",
+    path: "gno.land/r/foo",
+    decimals: 4,
+    symbol: "FOO",
+    logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+    priceId: "gno.land/r/foo"
+  },
+  feeTier: "FEE_500",
+  liquidity: "$1,182,797",
+  apr: "0.12%",
+  volume24h: "$1,182,797",
+  fees24h: "$131.937491",
+  rewards: [
+    {
+      token: {
+        chainId: "dev",
+        createdAt: "2023-10-12T06:56:12+09:00",
+        name: "Gnoswap",
+        address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+        path: "gno.land/r/gnos",
+        decimals: 4,
+        symbol: "GNOS",
+        logoURI: "/gnos.svg",
+        priceId: "gno.land/r/gnos"
+      },
+      amount: 10
+    }
+  ],
+  incentiveType: "Incentivized",
+  tickInfo: {
+    currentTick: 1.498590,
+    ticks: []
+  }
+};
 
 export default {
   title: "earn/EarnIncentivizedPools",
@@ -19,7 +72,7 @@ export const Default = Template.bind({});
 Default.args = {
   cardList: <IncentivizedPoolCardList
     currentIndex={1}
-    list={poolDummy}
+    incentivizedPools={[pool]}
     isFetched={true}
     routeItem={action("routeItem")}
     mobile={false}

packages/web/src/components/earn/earn-my-positions-no-liquidity/EarnMyPositionNoLiquidity.tsx

@@ -1,12 +1,12 @@
 import { NoLiquidityWrapper } from "./EarnMyPositionNoLiquidity.styles";
 
-interface EarnMyPositionNoLiquidityProps {}
+interface EarnMyPositionNoLiquidityProps { }
 
 const EarnMyPositionNoLiquidity: React.FC<
   EarnMyPositionNoLiquidityProps
 > = () => {
   // TODO : Added Recoil OR Props
-  const value = "$1,120.15";
+  const value = "$0";
   const apr = "999%";
 
   return (

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

@@ -8,7 +8,7 @@ describe("IncentivizedPoolCardList Component", () => {
     const args: IncentivizedPoolCardListProps = {
       currentIndex: 1,
       isFetched: true,
-      list: [],
+      incentivizedPools: [],
       mobile: false,
       routeItem: () => { return; }
     };

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

@@ -2,8 +2,60 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { css } from "@emotion/react";
 import IncentivizedPoolCardList from "./IncentivizedPoolCardList";
-import { poolDummy } from "@components/earn//incentivized-pool-card/incentivized-pool-dummy";
 import { action } from "@storybook/addon-actions";
+import { PoolCardInfo } from "@models/pool/info/pool-card-info";
+
+const pool: PoolCardInfo = {
+  poolId: "bar_foo_500",
+  tokenA: {
+    chainId: "dev",
+    createdAt: "2023-10-12T06:56:10+09:00",
+    name: "Bar",
+    address: "g1w8wqgrp08cqhtupzx98n4jtm8kqy7vadfmmyd0",
+    path: "gno.land/r/bar",
+    decimals: 4,
+    symbol: "BAR",
+    logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+    priceId: "gno.land/r/bar"
+  },
+  tokenB: {
+    chainId: "dev",
+    createdAt: "2023-10-12T06:56:08+09:00",
+    name: "Foo",
+    address: "g1evezrh92xaucffmtgsaa3rvmz5s8kedffsg469",
+    path: "gno.land/r/foo",
+    decimals: 4,
+    symbol: "FOO",
+    logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/5994.png",
+    priceId: "gno.land/r/foo"
+  },
+  feeTier: "FEE_500",
+  liquidity: "$1,182,797",
+  apr: "0.12%",
+  volume24h: "$1,182,797",
+  fees24h: "$131.937491",
+  rewards: [
+    {
+      token: {
+        chainId: "dev",
+        createdAt: "2023-10-12T06:56:12+09:00",
+        name: "Gnoswap",
+        address: "g1sqaft388ruvsseu97r04w4rr4szxkh4nn6xpax",
+        path: "gno.land/r/gnos",
+        decimals: 4,
+        symbol: "GNOS",
+        logoURI: "/gnos.svg",
+        priceId: "gno.land/r/gnos"
+      },
+      amount: 10
+    }
+  ],
+  incentiveType: "Incentivized",
+  tickInfo: {
+    currentTick: 1.498590,
+    ticks: []
+  }
+};
 
 export default {
   title: "earn/IncentivizedPoolCardList",
@@ -18,7 +70,7 @@ export default {
 
 const Template: ComponentStory<typeof IncentivizedPoolCardList> = args => (
   <div css={wrapper}>
-    <IncentivizedPoolCardList {...args} list={poolDummy} currentIndex={1} />
+    <IncentivizedPoolCardList {...args} incentivizedPools={[pool]} currentIndex={1} />
   </div>
 );
 

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

@@ -3,22 +3,22 @@ import {
   IncentivizedWrapper,
   PoolListWrapper,
 } from "./IncentivizedPoolCardList.styles";
-import { type PoolListProps } from "@containers/incentivized-pool-card-list-container/IncentivizedPoolCardListContainer";
 import IncentivizedPoolCard from "@components/earn/incentivized-pool-card/IncentivizedPoolCard";
 import { SHAPE_TYPES, skeletonStyle } from "@constants/skeleton.constant";
 import LoadMoreButton from "@components/common/load-more-button/LoadMoreButton";
+import { PoolCardInfo } from "@models/pool/info/pool-card-info";
 export interface IncentivizedPoolCardListProps {
-  list: Array<PoolListProps>;
+  incentivizedPools: PoolCardInfo[];
   loadMore?: boolean;
   isFetched: boolean;
   onClickLoadMore?: () => void;
   currentIndex: number;
-  routeItem: (id: number) => void;
+  routeItem: (id: string) => void;
   mobile: boolean;
 }
 
 const IncentivizedPoolCardList: React.FC<IncentivizedPoolCardListProps> = ({
-  list,
+  incentivizedPools,
   loadMore,
   isFetched,
   onClickLoadMore,
@@ -29,14 +29,14 @@ const IncentivizedPoolCardList: React.FC<IncentivizedPoolCardListProps> = ({
   <IncentivizedWrapper>
     <PoolListWrapper>
       {isFetched &&
-        list.length > 0 &&
-        list.map((item, idx) => (
-          <IncentivizedPoolCard item={item} key={idx} routeItem={routeItem} />
+        incentivizedPools.length > 0 &&
+        incentivizedPools.map((info, index) => (
+          <IncentivizedPoolCard pool={info} key={index} routeItem={routeItem} />
         ))}
       {!isFetched &&
-        Array.from({ length: 8 }).map((_, idx) => (
+        Array.from({ length: 8 }).map((_, index) => (
           <span
-            key={idx}
+            key={index}
             className="card-skeleton"
             css={skeletonStyle("100%", SHAPE_TYPES.ROUNDED_SQUARE)}
           />
@@ -51,7 +51,7 @@ const IncentivizedPoolCardList: React.FC<IncentivizedPoolCardListProps> = ({
       <div className="box-indicator">
         <span className="current-page">{currentIndex}</span>
         <span>/</span>
-        <span>{list.length}</span>
+        <span>{incentivizedPools.length}</span>
       </div>
     )}
   </IncentivizedWrapper>