[GSW-416] fix: Migrate Data model

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

@@ -3,8 +3,60 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import PoolInfo from "./PoolInfo";
 import { css, Theme } from "@emotion/react";
-import { dummyPoolList } from "@containers/pool-list-container/PoolListContainer";
 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/PoolList/PoolInfo",
@@ -13,7 +65,7 @@ export default {
 
 const Template: ComponentStory<typeof PoolInfo> = args => (
   <div css={wrapper}>
-    <PoolInfo {...args} pool={dummyPoolList[0]} />
+    <PoolInfo {...args} pool={pool} />
   </div>
 );
 

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

@@ -2,8 +2,60 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import PoolListTable from "./PoolListTable";
-import { dummyPoolList } from "@containers/pool-list-container/PoolListContainer";
 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/PoolList/PoolListTable",
@@ -16,7 +68,7 @@ const Template: ComponentStory<typeof PoolListTable> = args => (
 
 export const Default = Template.bind({});
 Default.args = {
-  pools: dummyPoolList,
+  pools: [pool],
   isFetched: true,
   routeItem: action("routeItem"),
   sortOption: undefined,
@@ -34,8 +86,8 @@ Skeleton.args = {
   isSortOption: () => true,
 };
 
-export const NotFount = Template.bind({});
-NotFount.args = {
+export const NotFound = Template.bind({});
+NotFound.args = {
   pools: [],
   isFetched: true,
   routeItem: action("routeItem"),

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

@@ -5,7 +5,6 @@ import { action } from "@storybook/addon-actions";
 import PoolList from "./PoolList";
 import {
   POOL_TYPE,
-  dummyPoolList,
 } from "@containers/pool-list-container/PoolListContainer";
 import { DEVICE_TYPE } from "@styles/media";
 
@@ -20,7 +19,7 @@ const Template: ComponentStory<typeof PoolList> = args => (
 
 export const Default = Template.bind({});
 Default.args = {
-  pools: dummyPoolList,
+  pools: [],
   poolType: POOL_TYPE.ALL,
   changePoolType: action("changePoolType"),
   search: action("search"),

packages/web/src/components/home/card-list/CardList.tsx

@@ -4,6 +4,7 @@ import { CardListWrapper, ListItem } from "./CardList.styles";
 import DoubleLogo from "@components/common/double-logo/DoubleLogo";
 import { CardListPoolInfo, CardListTokenInfo } from "@models/common/card-list-item-info";
 import { useCallback, useMemo } from "react";
+import { SwapFeeTierInfoMap } from "@constants/option.constant";
 
 interface CardListProps {
   list: Array<CardListTokenInfo | CardListPoolInfo>;
@@ -57,7 +58,10 @@ const CardListPoolItem: React.FC<CardListPoolItemProps> = ({ index, item, onClic
 
   const poolFeeRate = useMemo(() => {
     const pool = item.pool;
-    return `${pool.fee}%`;
+    const feeRate =
+      Object.values(SwapFeeTierInfoMap).find(model => `${model.fee}` === pool.fee)
+        ?.rateStr || "-";
+    return feeRate;
   }, [item]);
 
   const pairLogo = useMemo(() => {

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

@@ -1,8 +1,8 @@
-import { toPoolSelectItemInfo } from "@models/pool/info/pool-select-item-info";
 import PoolIncentivizeSelectPoolItem, { type PoolIncentivizeSelectPoolItemProps } from "./PoolIncentivizeSelectPoolItem";
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { PoolRepositoryMock } from "@repositories/pool";
+import { PoolMapper } from "@models/pool/mapper/pool-mapper";
 
 const poolRepository = new PoolRepositoryMock();
 const pools = (await poolRepository.getPools()).pools;
@@ -21,7 +21,7 @@ export default {
 
 } as Meta<typeof PoolIncentivizeSelectPoolItem>;
 
-const poolSelectItem = toPoolSelectItemInfo(pools[0]);
+const poolSelectItem = PoolMapper.toPoolSelectItemInfo(pools[0]);
 
 export const Default: StoryObj<PoolIncentivizeSelectPoolItemProps> = {
   args: {

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

@@ -41,8 +41,7 @@ const PoolIncentivizeSelectPoolItem: React.FC<PoolIncentivizeSelectPoolItemProps
     if (!poolSelectItem) {
       return "-";
     }
-    const feeRate = poolSelectItem.feeRate;
-    return `${feeRate}%`;
+    return poolSelectItem.feeRate;
   }, [poolSelectItem]);
 
   const liquidity = useMemo(() => {

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

@@ -2,10 +2,11 @@ import PoolIncentivizeSelectPool from "./PoolIncentivizeSelectPool";
 import { ComponentStory, Meta } from "@storybook/react";
 import { useCallback, useState } from "react";
 import { PoolRepositoryMock } from "@repositories/pool";
-import { PoolSelectItemInfo, toPoolSelectItemInfo } from "@models/pool/info/pool-select-item-info";
+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(toPoolSelectItemInfo);
+const pools = (await poolRepository.getPools()).pools.map(PoolMapper.toPoolSelectItemInfo);
 
 export default {
   title: "incentivize/PoolIncentivizeSelectPool",

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

@@ -8,8 +8,9 @@ import { PoolIncentivizeWrapper } from "./PoolIncentivize.styles";
 import PoolIncentivizeSelectPool from "../pool-incentivize-select-pool/PoolIncentivizeSelectPool";
 import { PoolModel } from "@models/pool/pool-model";
 import { TokenBalanceInfo } from "@models/token/token-balance-info";
-import { PoolSelectItemInfo, toPoolSelectItemInfo } from "@models/pool/info/pool-select-item-info";
+import { PoolSelectItemInfo } from "@models/pool/info/pool-select-item-info";
 import { PoolDetailModel } from "@models/pool/pool-detail-model";
+import { PoolMapper } from "@models/pool/mapper/pool-mapper";
 
 export interface DistributionPeriodDate {
   year: number;
@@ -54,11 +55,11 @@ const PoolIncentivize: React.FC<PoolIncentivizeProps> = ({
 }) => {
 
   const selectedItem = useMemo((): PoolSelectItemInfo | null => {
-    return selectedPool ? toPoolSelectItemInfo(selectedPool) : null;
+    return selectedPool ? PoolMapper.toPoolSelectItemInfo(selectedPool) : null;
   }, [selectedPool]);
 
   const poolSelectItems = useMemo((): PoolSelectItemInfo[] => {
-    return pools.map(toPoolSelectItemInfo);
+    return pools.map(PoolMapper.toPoolSelectItemInfo);
   }, [pools]);
 
   return (