From cc182744e27ba60c2f535b290e5eb44b51af1e7d Mon Sep 17 00:00:00 2001 From: jinoosss Date: Fri, 13 Oct 2023 14:19:39 +0900 Subject: [PATCH] [GSW-416] fix: Migrate Data model --- .../earn/pool-info/PoolInfo.stories.tsx | 56 ++++++++++++++++- .../pool-list-table/PoolListTable.stories.tsx | 60 +++++++++++++++++-- .../earn/pool-list/PoolList.stories.tsx | 3 +- .../components/home/card-list/CardList.tsx | 6 +- .../PoolIncentivizeSelectPoolItem.stories.tsx | 4 +- .../PoolIncentivizeSelectPoolItem.tsx | 3 +- .../PoolIncentivizeSelectPool.stories.tsx | 5 +- .../pool-incentivize/PoolIncentivize.tsx | 7 ++- .../RemoveLiquiditySelectListItem.stories.tsx | 29 --------- .../RemoveLiquiditySelectList.stories.tsx | 53 ---------------- .../RemoveLiquiditySelectResult.stories.tsx | 19 ------ .../RemoveLiquidity.stories.tsx | 52 ---------------- packages/web/src/hooks/pool/use-pool-data.tsx | 2 +- .../models/pool/info/pool-select-item-info.ts | 14 +---- .../web/src/models/pool/mapper/pool-mapper.ts | 15 +++++ .../position/position-repository-mock.ts | 15 ----- 16 files changed, 143 insertions(+), 200 deletions(-) delete mode 100644 packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.stories.tsx delete mode 100644 packages/web/src/components/remove/remove-liquidity-select-list/RemoveLiquiditySelectList.stories.tsx delete mode 100644 packages/web/src/components/remove/remove-liquidity-select-result/RemoveLiquiditySelectResult.stories.tsx delete mode 100644 packages/web/src/components/remove/remove-liquidity/RemoveLiquidity.stories.tsx delete mode 100644 packages/web/src/repositories/position/position-repository-mock.ts diff --git a/packages/web/src/components/earn/pool-info/PoolInfo.stories.tsx b/packages/web/src/components/earn/pool-info/PoolInfo.stories.tsx index aa40c509b..f8a273a27 100644 --- a/packages/web/src/components/earn/pool-info/PoolInfo.stories.tsx +++ b/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 = args => (
- +
); diff --git a/packages/web/src/components/earn/pool-list-table/PoolListTable.stories.tsx b/packages/web/src/components/earn/pool-list-table/PoolListTable.stories.tsx index b628e23eb..023a5c730 100644 --- a/packages/web/src/components/earn/pool-list-table/PoolListTable.stories.tsx +++ b/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 = 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"), diff --git a/packages/web/src/components/earn/pool-list/PoolList.stories.tsx b/packages/web/src/components/earn/pool-list/PoolList.stories.tsx index c51cb4ca2..f0eaf1c0a 100644 --- a/packages/web/src/components/earn/pool-list/PoolList.stories.tsx +++ b/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 = args => ( export const Default = Template.bind({}); Default.args = { - pools: dummyPoolList, + pools: [], poolType: POOL_TYPE.ALL, changePoolType: action("changePoolType"), search: action("search"), diff --git a/packages/web/src/components/home/card-list/CardList.tsx b/packages/web/src/components/home/card-list/CardList.tsx index 12313c877..ff38847e5 100644 --- a/packages/web/src/components/home/card-list/CardList.tsx +++ b/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; @@ -57,7 +58,10 @@ const CardListPoolItem: React.FC = ({ 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(() => { diff --git a/packages/web/src/components/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.stories.tsx b/packages/web/src/components/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.stories.tsx index f9ee0eaa2..721f38681 100644 --- a/packages/web/src/components/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.stories.tsx +++ b/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; -const poolSelectItem = toPoolSelectItemInfo(pools[0]); +const poolSelectItem = PoolMapper.toPoolSelectItemInfo(pools[0]); export const Default: StoryObj = { args: { diff --git a/packages/web/src/components/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.tsx b/packages/web/src/components/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.tsx index d99d8c665..36ba9705c 100644 --- a/packages/web/src/components/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.tsx +++ b/packages/web/src/components/incentivize/pool-incentivize-select-pool-item/PoolIncentivizeSelectPoolItem.tsx @@ -41,8 +41,7 @@ const PoolIncentivizeSelectPoolItem: React.FC { diff --git a/packages/web/src/components/incentivize/pool-incentivize-select-pool/PoolIncentivizeSelectPool.stories.tsx b/packages/web/src/components/incentivize/pool-incentivize-select-pool/PoolIncentivizeSelectPool.stories.tsx index 935295d2c..23d839f90 100644 --- a/packages/web/src/components/incentivize/pool-incentivize-select-pool/PoolIncentivizeSelectPool.stories.tsx +++ b/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", diff --git a/packages/web/src/components/incentivize/pool-incentivize/PoolIncentivize.tsx b/packages/web/src/components/incentivize/pool-incentivize/PoolIncentivize.tsx index 86b374e90..c4629c4f3 100644 --- a/packages/web/src/components/incentivize/pool-incentivize/PoolIncentivize.tsx +++ b/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 = ({ }) => { 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 ( diff --git a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.stories.tsx b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.stories.tsx deleted file mode 100644 index d6270c065..000000000 --- a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useState } from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; -import RemoveLiquiditySelectListItem from "./RemoveLiquiditySelectListItem"; -import { action } from "@storybook/addon-actions"; -import LPPositionData from "@repositories/position/mock/positions.json"; - -export default { - title: "remove liquidity/RemoveLiquiditySelectListItem", - component: RemoveLiquiditySelectListItem, -} as ComponentMeta; - - -const Template: ComponentStory = args => { - const [selected, setSelected] = useState(false); - return ( - setSelected(!selected)} - /> - ); -}; - -export const Default = Template.bind({}); -Default.args = { - lpPosition: LPPositionData.stakedPositions[0], - selected: false, - select: action("select"), -}; diff --git a/packages/web/src/components/remove/remove-liquidity-select-list/RemoveLiquiditySelectList.stories.tsx b/packages/web/src/components/remove/remove-liquidity-select-list/RemoveLiquiditySelectList.stories.tsx deleted file mode 100644 index c9918a7f3..000000000 --- a/packages/web/src/components/remove/remove-liquidity-select-list/RemoveLiquiditySelectList.stories.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useCallback, useMemo, useState } from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; -import RemoveLiquiditySelectList from "./RemoveLiquiditySelectList"; -import LPPositionData from "@repositories/position/mock/positions.json"; - -export default { - title: "remove lpPosition/RemoveLiquiditySelectList", - component: RemoveLiquiditySelectList, -} as ComponentMeta; - -const Template: ComponentStory = args => { - const [selectedIds, setSelectedIds] = useState([]); - - const unstakedLiquidities = useMemo(() => { - return args.lpPositions; - }, [args.lpPositions]); - - const selectedAll = useMemo(() => { - return unstakedLiquidities.length === selectedIds.length; - }, [selectedIds.length, unstakedLiquidities.length]); - - const selectAll = useCallback(() => { - if (selectedAll) { - setSelectedIds([]); - return; - } - const selectedIds = unstakedLiquidities.map(lpPosition => lpPosition.lpRewardId); - setSelectedIds(selectedIds); - }, [selectedAll, unstakedLiquidities]); - - const select = useCallback((id: string) => { - if (selectedIds.includes(id)) { - setSelectedIds(selectedIds.filter((selectedId => selectedId !== id))); - return; - } - setSelectedIds([...selectedIds, id]); - }, [selectedIds]); - - return ( - - ); -}; - -export const Default = Template.bind({}); -Default.args = { - lpPositions: LPPositionData.stakedPositions, -}; diff --git a/packages/web/src/components/remove/remove-liquidity-select-result/RemoveLiquiditySelectResult.stories.tsx b/packages/web/src/components/remove/remove-liquidity-select-result/RemoveLiquiditySelectResult.stories.tsx deleted file mode 100644 index ecbb575ca..000000000 --- a/packages/web/src/components/remove/remove-liquidity-select-result/RemoveLiquiditySelectResult.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; -import RemoveLiquiditySelectResult from "./RemoveLiquiditySelectResult"; -import PositionData from "@repositories/position/mock/positions.json"; - - -export default { - title: "remove liquidity/RemoveLiquiditySelectResult", - component: RemoveLiquiditySelectResult, -} as ComponentMeta; - -const Template: ComponentStory = args => ( - -); - -export const Default = Template.bind({}); -Default.args = { - selectedLiquidities: PositionData.stakedPositions, -}; diff --git a/packages/web/src/components/remove/remove-liquidity/RemoveLiquidity.stories.tsx b/packages/web/src/components/remove/remove-liquidity/RemoveLiquidity.stories.tsx deleted file mode 100644 index 2c486b739..000000000 --- a/packages/web/src/components/remove/remove-liquidity/RemoveLiquidity.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useCallback, useMemo, useState } from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; -import RemoveLiquidity from "./RemoveLiquidity"; -import LPPositionData from "@repositories/position/mock/positions.json"; - -export default { - title: "remove position/RemoveLiquidity", - component: RemoveLiquidity, -} as ComponentMeta; - -const Template: ComponentStory = (args) => { - const [selectedIds, setSelectedIds] = useState([]); - - const unstakedLiquidities = useMemo(() => { - return args.lpPositions; - }, [args.lpPositions]); - - const selectedAll = useMemo(() => { - return unstakedLiquidities.length === selectedIds.length; - }, [selectedIds.length, unstakedLiquidities.length]); - - const selectAll = useCallback(() => { - if (selectedAll) { - setSelectedIds([]); - return; - } - const selectedIds = unstakedLiquidities.map(position => position.lpRewardId); - setSelectedIds(selectedIds); - }, [selectedAll, unstakedLiquidities]); - - const select = useCallback((id: string) => { - if (selectedIds.includes(id)) { - setSelectedIds(selectedIds.filter((selectedId => selectedId !== id))); - return; - } - setSelectedIds([...selectedIds, id]); - }, [selectedIds]); - - return ( - - ); -}; - -export const Default = Template.bind({}); -Default.args = { - lpPositions: LPPositionData.stakedPositions -}; diff --git a/packages/web/src/hooks/pool/use-pool-data.tsx b/packages/web/src/hooks/pool/use-pool-data.tsx index 69e48dbfe..d0ed15278 100644 --- a/packages/web/src/hooks/pool/use-pool-data.tsx +++ b/packages/web/src/hooks/pool/use-pool-data.tsx @@ -24,7 +24,7 @@ export const usePoolData = () => { return sortedTokens.map(pool => ({ pool, upDown: "none", - content: `${pool.topBin.annualizedFeeGrowth}%` + content: `${pool.topBin.annualizedFeeGrowth || 0}%` })); }, [pools]); diff --git a/packages/web/src/models/pool/info/pool-select-item-info.ts b/packages/web/src/models/pool/info/pool-select-item-info.ts index f726065ce..e362aa0c0 100644 --- a/packages/web/src/models/pool/info/pool-select-item-info.ts +++ b/packages/web/src/models/pool/info/pool-select-item-info.ts @@ -1,11 +1,9 @@ -import { PoolModel } from "@models/pool/pool-model"; import { TokenModel } from "@models/token/token-model"; -import BigNumber from "bignumber.js"; export interface PoolSelectItemInfo { poolId: string; - feeRate: number; + feeRate: string; liquidityAmount: string; @@ -13,13 +11,3 @@ export interface PoolSelectItemInfo { tokenB: TokenModel; } - -export function toPoolSelectItemInfo(pool: PoolModel): PoolSelectItemInfo { - return { - poolId: pool.id, - liquidityAmount: BigNumber(pool.price).toFixed(), - feeRate: pool.fee, - tokenA: pool.tokenA, - tokenB: pool.tokenB, - }; -} diff --git a/packages/web/src/models/pool/mapper/pool-mapper.ts b/packages/web/src/models/pool/mapper/pool-mapper.ts index 3d8e6635c..a047c5491 100644 --- a/packages/web/src/models/pool/mapper/pool-mapper.ts +++ b/packages/web/src/models/pool/mapper/pool-mapper.ts @@ -4,6 +4,7 @@ import { PoolModel } from "../pool-model"; import { SwapFeeTierInfoMap } from "@constants/option.constant"; import { PoolRewardInfo } from "../info/pool-reward-info"; import { PoolCardInfo } from "../info/pool-card-info"; +import { PoolSelectItemInfo } from "../info/pool-select-item-info"; export class PoolMapper { public static toListInfo(poolModel: PoolModel): PoolListInfo { @@ -56,6 +57,20 @@ export class PoolMapper { }; } + public static toPoolSelectItemInfo(pool: PoolModel): PoolSelectItemInfo { + const feeRate = + Object.values(SwapFeeTierInfoMap).find(info => `${info.fee}` === pool.fee) + ?.rateStr || "-"; + + return { + poolId: pool.id, + liquidityAmount: BigNumber(pool.price).toFixed(), + feeRate, + tokenA: pool.tokenA, + tokenB: pool.tokenB, + }; + } + public static toCardInfo(poolModel: PoolModel): PoolCardInfo { const { id, diff --git a/packages/web/src/repositories/position/position-repository-mock.ts b/packages/web/src/repositories/position/position-repository-mock.ts deleted file mode 100644 index 496317289..000000000 --- a/packages/web/src/repositories/position/position-repository-mock.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { PositionRepository } from "./position-repository"; -import { PositionListResponse, PositionDetailResponse } from "./response"; - -import PositionListData from "./mock/positions.json"; -import PositionDetailData from "./mock/position-detail.json"; - -export class PositionRepositoryMock implements PositionRepository { - getPositions = async (): Promise => { - return PositionListData as PositionListResponse; - }; - - getPositionDetailByPositionId = async (): Promise => { - return PositionDetailData as PositionDetailResponse; - }; -}