From 44e63050b51db33452bb7d0a5844d6bedc2a5e46 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Mon, 24 Apr 2023 00:22:32 +0700 Subject: [PATCH 01/32] feat: pool related table blank --- CHANGELOG.md | 1 + .../pages/pool/components/PoolAssetDetail.tsx | 2 +- .../pages/pool/components/PoolRelatedTxs.tsx | 72 +++++++++++----- .../{ => pool-assets}/PoolAssetsTable.tsx | 0 .../PoolAssetsTableHeader.tsx | 0 .../{ => pool-assets}/PoolAssetsTableRow.tsx | 28 ++++--- .../components/table/pool-assets/index.ts | 1 + .../table/pool-txs/PoolTxsTable.tsx | 37 ++++++++ .../table/pool-txs/PoolTxsTableHeader.tsx | 18 ++++ .../table/pool-txs/PoolTxsTableMultiRow.tsx | 27 ++++++ .../table/pool-txs/PoolTxsTableRow.tsx | 84 +++++++++++++++++++ .../pool/components/table/pool-txs/index.tsx | 84 +++++++++++++++++++ .../table/pool-txs/messages/index.tsx | 27 ++++++ src/lib/pages/pool/poolId.tsx | 6 +- 14 files changed, 348 insertions(+), 39 deletions(-) rename src/lib/pages/pool/components/table/{ => pool-assets}/PoolAssetsTable.tsx (100%) rename src/lib/pages/pool/components/table/{ => pool-assets}/PoolAssetsTableHeader.tsx (100%) rename src/lib/pages/pool/components/table/{ => pool-assets}/PoolAssetsTableRow.tsx (78%) create mode 100644 src/lib/pages/pool/components/table/pool-assets/index.ts create mode 100644 src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx create mode 100644 src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx create mode 100644 src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx create mode 100644 src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx create mode 100644 src/lib/pages/pool/components/table/pool-txs/index.tsx create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 92447e9ea..3747ad1c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table with blank states - [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Add Pool navigation and pool detail data - [#270](https://github.com/alleslabs/celatone-frontend/pull/270) Add Pool navigation and detail page - [#268](https://github.com/alleslabs/celatone-frontend/pull/268) Wireup create proposal to whitelisting diff --git a/src/lib/pages/pool/components/PoolAssetDetail.tsx b/src/lib/pages/pool/components/PoolAssetDetail.tsx index b4082c103..fc219927b 100644 --- a/src/lib/pages/pool/components/PoolAssetDetail.tsx +++ b/src/lib/pages/pool/components/PoolAssetDetail.tsx @@ -11,7 +11,7 @@ import type { USD } from "lib/types"; import type { PoolDetail } from "lib/types/pool"; import { calAssetValueWithPrecision, formatPrice } from "lib/utils"; -import { PoolAssetsTable } from "./table/PoolAssetsTable"; +import { PoolAssetsTable } from "./table/pool-assets/PoolAssetsTable"; interface PoolAssetDetailProps { assets: Coin[]; diff --git a/src/lib/pages/pool/components/PoolRelatedTxs.tsx b/src/lib/pages/pool/components/PoolRelatedTxs.tsx index f127a9e24..7d1f80717 100644 --- a/src/lib/pages/pool/components/PoolRelatedTxs.tsx +++ b/src/lib/pages/pool/components/PoolRelatedTxs.tsx @@ -9,8 +9,24 @@ import { } from "@chakra-ui/react"; import { CustomTab } from "lib/components/CustomTab"; +import { useTxsCountByPoolId } from "lib/services/txService"; + +import { PoolRelatedTxsTable } from "./table/pool-txs"; + +interface PoolRelatedTxsProps { + poolId: number; +} + +export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => { + const { data: countAllTxs = 0 } = useTxsCountByPoolId(poolId, "is_all"); + const { data: countSwapTxs = 0 } = useTxsCountByPoolId(poolId, "is_swap"); + const { data: countLpTxs = 0 } = useTxsCountByPoolId(poolId, "is_lp"); + const { data: countBondTxs = 0 } = useTxsCountByPoolId(poolId, "is_bond"); + const { data: countSuperfluidTxs = 0 } = useTxsCountByPoolId( + poolId, + "is_superfluid" + ); -export const PoolRelatedTxs = () => { return ( @@ -20,37 +36,47 @@ export const PoolRelatedTxs = () => { - All - Swap - LP - Bonding - Superfluid + All + Swap + LP + Bonding + Superfluid - All - Swappppppp Lorem ipsum dolor sit amet consectetur adipisicing elit. - Delectus beatae esse doloremque eaque dolores magni harum pariatur, - corporis aliquid at quam quod fuga fugit sit a ipsam culpa tempora - voluptate? + + + + - LPLPLPLPLPLLPLP Lorem ipsum dolor sit amet consectetur adipisicing - elit. Delectus beatae esse doloremque eaque dolores magni harum - pariatur, corporis aliquid at quam quod fuga fugit sit a ipsam culpa - tempora voluptate? + - BondingBondingBonding Lorem ipsum dolor sit amet consectetur - adipisicing elit. Delectus beatae esse doloremque eaque dolores - magni harum pariatur, corporis aliquid at quam quod fuga fugit sit a - ipsam culpa tempora voluptate? + - SuperfluidSuperfluid Lorem ipsum dolor sit amet consectetur - adipisicing elit. Delectus beatae esse doloremque eaque dolores - magni harum pariatur, corporis aliquid at quam quod fuga fugit sit a - ipsam culpa tempora voluptate? + diff --git a/src/lib/pages/pool/components/table/PoolAssetsTable.tsx b/src/lib/pages/pool/components/table/pool-assets/PoolAssetsTable.tsx similarity index 100% rename from src/lib/pages/pool/components/table/PoolAssetsTable.tsx rename to src/lib/pages/pool/components/table/pool-assets/PoolAssetsTable.tsx diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx b/src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableHeader.tsx similarity index 100% rename from src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx rename to src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableHeader.tsx diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx b/src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableRow.tsx similarity index 78% rename from src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx rename to src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableRow.tsx index b28457483..10615bb5b 100644 --- a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx +++ b/src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableRow.tsx @@ -4,8 +4,8 @@ import type { Coin } from "@cosmjs/stargate"; import big from "big.js"; import type { BigSource, Big } from "big.js"; -import { getUndefinedTokenIcon } from "../../utils"; import { TableRow } from "lib/components/table/tableComponents"; +import { getUndefinedTokenIcon } from "lib/pages/pool/utils"; import { useAssetInfos } from "lib/services/assetService"; import type { Token, U, USD, PoolDetail } from "lib/types"; import { @@ -36,24 +36,26 @@ export const PoolAssetsTableRow = ({ ); const assetInfo = assetInfos[asset.denom]; - const assetValue = calculateAssetValue( - toToken(big(asset.amount) as U>, assetInfo.precision), - assetInfo.price as USD - ); + const assetValue = assetInfo + ? calculateAssetValue( + toToken(big(asset.amount) as U>, assetInfo.precision), + assetInfo.price as USD + ) + : (0 as USD); return ( {assetInfo?.symbol || getTokenLabel(asset.denom)} - {formatPrice(assetInfo.price as USD)} + {assetInfo ? formatPrice(assetInfo.price as USD) : "-"} @@ -80,11 +82,13 @@ export const PoolAssetsTableRow = ({ - {formatUTokenWithPrecision( - asset.amount as U, - assetInfo.precision, - false - )} + {assetInfo + ? formatUTokenWithPrecision( + asset.amount as U, + assetInfo.precision, + false + ) + : (asset.amount as U)} {formatPrice(assetValue)} diff --git a/src/lib/pages/pool/components/table/pool-assets/index.ts b/src/lib/pages/pool/components/table/pool-assets/index.ts new file mode 100644 index 000000000..58db43c46 --- /dev/null +++ b/src/lib/pages/pool/components/table/pool-assets/index.ts @@ -0,0 +1 @@ +export * from "./PoolAssetsTable"; diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx new file mode 100644 index 000000000..fb13b325b --- /dev/null +++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx @@ -0,0 +1,37 @@ +import { TableContainer } from "@chakra-ui/react"; + +import { Loading } from "lib/components/Loading"; +import type { Option, Transaction } from "lib/types"; + +import { PoolTxsTableHeader } from "./PoolTxsTableHeader"; +import { PoolTxsTableMultiRow } from "./PoolTxsTableMultiRow"; + +interface PoolTxsTableProps { + transactions: Option; + isLoading: boolean; + emptyState: JSX.Element; +} + +export const PoolTxsTable = ({ + transactions, + isLoading, + emptyState, +}: PoolTxsTableProps) => { + if (isLoading) return ; + if (!transactions?.length) return emptyState; + + const templateColumns = "150px minmax(360px, 1fr) max(150px) max(220px) 60px"; + + return ( + + + {transactions.map((transaction) => ( + + ))} + + ); +}; diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx new file mode 100644 index 000000000..911ed4821 --- /dev/null +++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx @@ -0,0 +1,18 @@ +import type { GridProps } from "@chakra-ui/react"; +import { Grid } from "@chakra-ui/react"; + +import { TableHeader } from "lib/components/table"; + +export const PoolTxsTableHeader = ({ + templateColumns, +}: { + templateColumns: GridProps["templateColumns"]; +}) => ( + + Transaction Hash + Actions + Sender + Timestamp + + +); diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx new file mode 100644 index 000000000..eb685e8b0 --- /dev/null +++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx @@ -0,0 +1,27 @@ +import type { Transaction } from "lib/types"; + +import { PoolTxsTableRow } from "./PoolTxsTableRow"; + +interface PoolTxsTableMultiRowProps { + transaction: Transaction; + templateColumns: string; +} + +export const PoolTxsTableMultiRow = ({ + transaction, + templateColumns, +}: PoolTxsTableMultiRowProps) => ( + <> + {transaction.messages.map((message, index) => ( + + ))} + +); diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx new file mode 100644 index 000000000..35e8373c1 --- /dev/null +++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx @@ -0,0 +1,84 @@ +import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react"; + +import { ExplorerLink } from "lib/components/ExplorerLink"; +import { CustomIcon } from "lib/components/icon"; +import { TableRow } from "lib/components/table"; +import type { Addr, Message } from "lib/types"; +import { dateFromNow, formatUTC } from "lib/utils"; + +import { PoolTxsAction, PoolTxsDetail } from "./messages"; + +interface PoolTxsTableRowProps { + txHash?: string; + msgCount: number; + message: Message; + sender: Addr; + created?: Date; + templateColumns: string; +} + +export const PoolTxsTableRow = ({ + txHash, + msgCount, + message, + sender, + created, + templateColumns, +}: PoolTxsTableRowProps) => { + const { isOpen, onToggle } = useDisclosure(); + + return ( + + + + {txHash && ( + + + {msgCount > 1 && ( + + {msgCount} + + )} + + )} + + + + + + + + + + + {created && ( + + {formatUTC(created)} + + {`(${dateFromNow(created)})`} + + + )} + + + + + + + + + ); +}; diff --git a/src/lib/pages/pool/components/table/pool-txs/index.tsx b/src/lib/pages/pool/components/table/pool-txs/index.tsx new file mode 100644 index 000000000..1767bafcf --- /dev/null +++ b/src/lib/pages/pool/components/table/pool-txs/index.tsx @@ -0,0 +1,84 @@ +import type { ChangeEvent } from "react"; + +import { Pagination } from "lib/components/pagination"; +import { usePaginator } from "lib/components/pagination/usePaginator"; +import { EmptyState } from "lib/components/state"; +import { useTxsByPoolIdPagination } from "lib/services/txService"; +import type { PoolTxFilter } from "lib/types"; + +import { PoolTxsTable } from "./PoolTxsTable"; + +interface PoolRelatedTxsTableProps { + poolId: number; + countTxs: number; + type: PoolTxFilter; +} + +export const PoolRelatedTxsTable = ({ + poolId, + countTxs, + type, +}: PoolRelatedTxsTableProps) => { + const { + pagesQuantity, + currentPage, + setCurrentPage, + pageSize, + setPageSize, + offset, + } = usePaginator({ + total: countTxs, + initialState: { + pageSize: 10, + currentPage: 1, + isDisabled: false, + }, + }); + + const { + data: txs, + isLoading, + error, + } = useTxsByPoolIdPagination(poolId, type, offset, pageSize); + + const onPageChange = (nextPage: number) => { + setCurrentPage(nextPage); + }; + + const onPageSizeChange = (e: ChangeEvent) => { + const size = Number(e.target.value); + setPageSize(size); + setCurrentPage(1); + }; + + if (error) + return ( + + ); + return ( + <> + + } + /> + + + ); +}; diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx new file mode 100644 index 000000000..27d37aa6d --- /dev/null +++ b/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx @@ -0,0 +1,27 @@ +import { Text } from "@chakra-ui/react"; + +import type { Message } from "lib/types"; + +export const PoolTxsAction = ({ msg }: { msg: Message }) => { + // TODO: fix and add cases + const { type } = msg; + switch (type) { + case "type1": + case "type2": + case "type3": + default: + return {type}; + } +}; + +export const PoolTxsDetail = ({ msg }: { msg: Message }) => { + // TODO: fix and add cases + const { type } = msg; + switch (type) { + case "type1": + case "type2": + case "type3": + default: + return {type}; + } +}; diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pool/poolId.tsx index 9b7e81b6d..fa0facdc9 100644 --- a/src/lib/pages/pool/poolId.tsx +++ b/src/lib/pages/pool/poolId.tsx @@ -14,8 +14,8 @@ export const PoolId = () => { const navigate = useInternalNavigate(); if (!router.query.poolId) return ; - const query = router.query.poolId; - const pool = MockUpPoolList.find((x) => x.id === +query); + const poolIdParam = router.query.poolId; + const pool = MockUpPoolList.find((x) => x.id === +poolIdParam); if (!pool) return navigate({ pathname: `/pool` }); return ( @@ -26,7 +26,7 @@ export const PoolId = () => { // weight={pool.weight} // scaling_factors={pool.scaling_factors} /> - + ); }; From a7bd094cf79d290844da629fecf71d9a99383ecc Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Mon, 24 Apr 2023 02:17:34 +0700 Subject: [PATCH 02/32] fix: tx badge count --- src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx | 2 +- .../pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx | 4 ++-- src/lib/styles/theme/components/badge.ts | 4 ++++ 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx index fb13b325b..3fa33d9c7 100644 --- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx +++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx @@ -20,7 +20,7 @@ export const PoolTxsTable = ({ if (isLoading) return ; if (!transactions?.length) return emptyState; - const templateColumns = "150px minmax(360px, 1fr) max(150px) max(220px) 60px"; + const templateColumns = "200px minmax(360px, 1fr) max(150px) max(220px) 60px"; return ( diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx index 35e8373c1..7b27ac2a6 100644 --- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx +++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx @@ -39,14 +39,14 @@ export const PoolTxsTableRow = ({ > {txHash && ( - + {msgCount > 1 && ( - + {msgCount} )} diff --git a/src/lib/styles/theme/components/badge.ts b/src/lib/styles/theme/components/badge.ts index edfc0a664..477067b18 100644 --- a/src/lib/styles/theme/components/badge.ts +++ b/src/lib/styles/theme/components/badge.ts @@ -20,5 +20,9 @@ export const Badge: ComponentStyleConfig = { color: "text.main", }, honeydew: { background: "honeydew.dark", color: "background.main" }, + lilac: { + background: "lilac.main", + color: "background.main", + }, }, }; From f880a39a18352be783d11e82d1ecc6fab46a60a3 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Mon, 24 Apr 2023 10:38:03 +0700 Subject: [PATCH 03/32] fix: table border style --- src/lib/components/table/tableComponents.ts | 8 +++++ .../table/pool-txs/PoolTxsTableRow.tsx | 31 +++++++++++-------- 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/lib/components/table/tableComponents.ts b/src/lib/components/table/tableComponents.ts index da64c2616..f0fc56cd1 100644 --- a/src/lib/components/table/tableComponents.ts +++ b/src/lib/components/table/tableComponents.ts @@ -52,6 +52,14 @@ export const TableRow = chakra(GridItem, { baseStyle: tableRowBaseStyle, }); +export const TableNoBorderRow = chakra(GridItem, { + baseStyle: { + ...tableRowBaseStyle, + borderBottom: undefined, + borderColor: undefined, + }, +}); + export const TableRowFreeze = chakra(GridItem, { baseStyle: { ...tableRowBaseStyle, diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx index 7b27ac2a6..a9508169c 100644 --- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx +++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx @@ -2,7 +2,7 @@ import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { CustomIcon } from "lib/components/icon"; -import { TableRow } from "lib/components/table"; +import { TableNoBorderRow } from "lib/components/table"; import type { Addr, Message } from "lib/types"; import { dateFromNow, formatUTC } from "lib/utils"; @@ -28,16 +28,21 @@ export const PoolTxsTableRow = ({ const { isOpen, onToggle } = useDisclosure(); return ( - + - + {txHash && ( )} - - + + - + - + - + - + {created && ( {formatUTC(created)} @@ -70,11 +75,11 @@ export const PoolTxsTableRow = ({ )} - + - + - + - {success && ( + {transaction.success && ( diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/AssetCard.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/AssetCard.tsx index 2c67e5c46..fe9c5b274 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/AssetCard.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/AssetCard.tsx @@ -40,10 +40,10 @@ export const AssetCard = ({ ( - - - - - - + +
+ span": { + display: "none", + }, + }} + > + {tokens.map((token) => ( + - {tokens.map((token) => ( - <> - - {token.symbol || getTokenLabel(token.denom)} - - - / - - - ))} - - - - {poolId} - - - + {token.symbol || getTokenLabel(token.denom)} + + {" "} + / + + + ))} + + + {poolId} + +
); diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx index a4454e19f..8c1022e61 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx @@ -4,10 +4,12 @@ import type { AssetInfosOpt } from "lib/services/assetService"; import type { Message } from "lib/types"; import type { MsgSwapExactAmountIn, MsgSwapExactAmountOut } from "./messages"; -import { MsgSwapExactAmountInAction } from "./swap/MsgSwapExactAmountInAction"; -import { MsgSwapExactAmountInDetail } from "./swap/MsgSwapExactAmountInDetail"; -import { MsgSwapExactAmountOutAction } from "./swap/MsgSwapExactAmountOutAction"; -import { MsgSwapExactAmountOutDetail } from "./swap/MsgSwapExactAmountOutDetail"; +import { + MsgSwapExactAmountInAction, + MsgSwapExactAmountInDetail, + MsgSwapExactAmountOutAction, + MsgSwapExactAmountOutDetail, +} from "./swap"; export const PoolTxsAction = ({ msg, @@ -47,12 +49,14 @@ export const PoolTxsDetail = ({ msgIndex, msg, assetInfos, + isOpened, }: { txHash: string; blockHeight: number; msgIndex: number; msg: Message; assetInfos: AssetInfosOpt; + isOpened: boolean; }) => { // TODO: fix and add cases const { type } = msg; @@ -66,6 +70,7 @@ export const PoolTxsDetail = ({ msgIndex={msgIndex} msg={msg.detail as MsgSwapExactAmountIn} assetInfos={assetInfos} + isOpened={isOpened} /> ); case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut": @@ -77,6 +82,7 @@ export const PoolTxsDetail = ({ msgIndex={msgIndex} msg={msg.detail as MsgSwapExactAmountOut} assetInfos={assetInfos} + isOpened={isOpened} /> ); case "type3": diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx index 6ad66301c..a02413513 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx @@ -1,11 +1,9 @@ -import { Flex, Text, Tooltip } from "@chakra-ui/react"; +import { Flex } from "@chakra-ui/react"; import type { MsgSwapExactAmountIn } from "../messages"; import { MsgToken } from "lib/components/action-msg/MsgToken"; -import { Copier } from "lib/components/copy"; import { CustomIcon } from "lib/components/icon"; import type { AssetInfosOpt } from "lib/services/assetService"; -import { getTokenLabel } from "lib/utils"; interface MsgSwapExactAmountInActionProps { msg: MsgSwapExactAmountIn; @@ -26,31 +24,16 @@ export const MsgSwapExactAmountInAction = ({ coin={msg.tokenIn} symbol={inAssetInfo?.symbol} precision={inAssetInfo?.precision} + fontWeight="700" /> - - - {getTokenLabel(outAssetInfo?.symbol ?? tokenOutDenom)} - - - - - - - - + at least + ); }; diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx index ac72bfb4e..175fc7231 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx @@ -13,6 +13,7 @@ interface MsgSwapExactAmountInDetailProps { msgIndex: number; msg: MsgSwapExactAmountIn; assetInfos: AssetInfosOpt; + isOpened: boolean; } export const MsgSwapExactAmountInDetail = ({ @@ -21,6 +22,7 @@ export const MsgSwapExactAmountInDetail = ({ msgIndex, msg, assetInfos, + isOpened, }: MsgSwapExactAmountInDetailProps) => ( @@ -34,8 +36,17 @@ export const MsgSwapExactAmountInDetail = ({ /> - - + + ); diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx index fb2ead952..c24209740 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx @@ -1,11 +1,9 @@ -import { Flex, Text, Tooltip } from "@chakra-ui/react"; +import { Flex } from "@chakra-ui/react"; import type { MsgSwapExactAmountOut } from "../messages"; import { MsgToken } from "lib/components/action-msg/MsgToken"; -import { Copier } from "lib/components/copy"; import { CustomIcon } from "lib/components/icon"; import type { AssetInfosOpt } from "lib/services/assetService"; -import { getTokenLabel } from "lib/utils"; interface MsgSwapExactAmountOutActionProps { msg: MsgSwapExactAmountOut; @@ -21,35 +19,19 @@ export const MsgSwapExactAmountOutAction = ({ const outAssetInfo = assetInfos?.[msg.tokenOut.denom]; return ( - Swap - - - {getTokenLabel(inAssetInfo?.symbol ?? tokenInDenom)} - - - - - - - - + Swap at most + ); diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx index 6c23bc8fd..b38a72b1c 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx @@ -13,6 +13,7 @@ interface MsgSwapExactAmountOutDetailProps { msgIndex: number; msg: MsgSwapExactAmountOut; assetInfos: AssetInfosOpt; + isOpened: boolean; } export const MsgSwapExactAmountOutDetail = ({ @@ -21,6 +22,7 @@ export const MsgSwapExactAmountOutDetail = ({ msgIndex, msg, assetInfos, + isOpened, }: MsgSwapExactAmountOutDetailProps) => { const outDenoms = msg.routes .map((route) => route.tokenInDenom) @@ -43,8 +45,17 @@ export const MsgSwapExactAmountOutDetail = ({ /> - - + + ); diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx index b268dd90c..82f6b1e56 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx @@ -15,11 +15,13 @@ interface PoolRouteProps { tokenOutDenom: string; }[]; assetInfos: AssetInfosOpt; + isOpened: boolean; } -export const PoolRoute = ({ routes, assetInfos }: PoolRouteProps) => { +export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => { const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds( - routes.map((pool) => pool.poolId) + routes.map((pool) => pool.poolId), + isOpened ); if (isLoading) return ; diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolSwap.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolSwap.tsx index 5e5db3c7d..e57db5b70 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolSwap.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolSwap.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Text } from "@chakra-ui/react"; +import { Flex, Text } from "@chakra-ui/react"; import { AssetCard } from "../AssetCard"; import { CustomIcon } from "lib/components/icon"; @@ -11,14 +11,16 @@ interface PoolSwapInterface { txHash: string; msgIndex: number; assetInfos: AssetInfosOpt; + isOpened: boolean; } export const PoolSwap = ({ txHash, msgIndex, assetInfos, + isOpened, }: PoolSwapInterface) => { - const { data: txData, isLoading } = useTxData(txHash); + const { data: txData, isLoading } = useTxData(txHash, isOpened); if (isLoading) return ; const swapEvent = txData?.logs @@ -29,17 +31,19 @@ export const PoolSwap = ({ ); + // Get the token-in from the third attribute of the event e.g. 10000utoken const inAsset = swapEvent.attributes.at(3)?.value ?? ""; const inAmount = inAsset.match(/[0-9]+/g)?.[0] ?? ""; const inDenom = inAsset.slice(inAmount.length); + // Get the token-out from the last attribute of the event e.g. 10000utoken const outAsset = swapEvent.attributes.at(-1)?.value ?? ""; const outAmount = outAsset.match(/[0-9]+/g)?.[0] ?? ""; const outDenom = outAsset.slice(outAmount.length); return ( - +
From @@ -48,9 +52,9 @@ export const PoolSwap = ({ denom={inDenom} assetInfo={assetInfos?.[inDenom]} /> - +
- +
To @@ -59,7 +63,7 @@ export const PoolSwap = ({ denom={outDenom} assetInfo={assetInfos?.[outDenom]} /> - +
); }; diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/index.ts b/src/lib/pages/pools/components/table/pool-txs/messages/swap/index.ts new file mode 100644 index 000000000..4b7fc414d --- /dev/null +++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/index.ts @@ -0,0 +1,4 @@ +export * from "./MsgSwapExactAmountInAction"; +export * from "./MsgSwapExactAmountInDetail"; +export * from "./MsgSwapExactAmountOutAction"; +export * from "./MsgSwapExactAmountOutDetail"; diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts index fa68acf04..060ffc5f9 100644 --- a/src/lib/pages/pools/data.ts +++ b/src/lib/pages/pools/data.ts @@ -4,10 +4,12 @@ import big from "big.js"; import type { Order_By } from "lib/gql/graphql"; import { useAssetInfos } from "lib/services/assetService"; import { usePoolByPoolId, usePoolListQuery } from "lib/services/poolService"; +import { useTxsCountByPoolId } from "lib/services/txService"; import type { Option, Pool, PoolDetail, + PoolTxFilter, PoolTypeFilter, PoolWeight, TokenWithValue, @@ -88,3 +90,18 @@ export const usePool = ( isLoading: false, }; }; + +export const usePoolTxsCount = ( + poolId: number, + type: PoolTxFilter +): { count: number; countDisplay: string; isLoading: boolean } => { + const { data, isLoading } = useTxsCountByPoolId(poolId, type); + if (isLoading) return { count: 0, countDisplay: "0", isLoading }; + + const showActualCount = data !== undefined && data <= 10000; + return { + count: showActualCount ? data : 10000, + countDisplay: showActualCount ? data.toString() : "10000+", + isLoading: false, + }; +}; diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts index 8f187ab2c..dd54a7a94 100644 --- a/src/lib/services/poolService.ts +++ b/src/lib/services/poolService.ts @@ -170,7 +170,8 @@ export const usePoolByPoolId = ( }; export const usePoolAssetsbyPoolIds = ( - poolIds: number[] + poolIds: number[], + enabled = true ): UseQueryResult> => { const { indexerGraphClient } = useCelatoneApp(); @@ -192,5 +193,7 @@ export const usePoolAssetsbyPoolIds = ( ); }, [poolIds, indexerGraphClient]); - return useQuery(["pools_by_pool_ids", poolIds, indexerGraphClient], queryFn); + return useQuery(["pools_by_pool_ids", poolIds, indexerGraphClient], queryFn, { + enabled, + }); }; diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts index 82fd31469..b6e413d33 100644 --- a/src/lib/services/txService.ts +++ b/src/lib/services/txService.ts @@ -46,7 +46,10 @@ export interface TxData extends TxResponse { isTxFailed: boolean; } -export const useTxData = (txHash: Option): UseQueryResult => { +export const useTxData = ( + txHash: Option, + enabled = true +): UseQueryResult => { const { currentChainName } = useWallet(); const chainId = useChainId(); const queryFn = useCallback( @@ -64,7 +67,7 @@ export const useTxData = (txHash: Option): UseQueryResult => { return useQuery({ queryKey: ["tx_data", currentChainName, chainId, txHash] as string[], queryFn, - enabled: Boolean(txHash && isTxHash(txHash)), + enabled: enabled && Boolean(txHash && isTxHash(txHash)), refetchOnWindowFocus: false, retry: false, }); From 00917e4414b6fc65721f47edff698d7c98078f39 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 9 May 2023 15:52:54 +0700 Subject: [PATCH 11/32] fix: comments --- src/lib/components/ExplorerLink.tsx | 9 +++++++-- .../components/table/pool-txs/messages/PoolAssets.tsx | 7 +++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx index d63d0c089..087d7327c 100644 --- a/src/lib/components/ExplorerLink.tsx +++ b/src/lib/components/ExplorerLink.tsx @@ -20,7 +20,8 @@ export type LinkType = | "tx_hash" | "code_id" | "block_height" - | "proposal_id"; + | "proposal_id" + | "pool_id"; interface ExplorerLinkProps extends BoxProps { value: string; @@ -63,6 +64,9 @@ const getNavigationUrl = ( case "proposal_id": url = getExplorerProposalUrl(currentChainName); break; + case "pool_id": + url = "/pools"; + break; case "invalid_address": return ""; default: @@ -161,7 +165,8 @@ export const ExplorerLink = ({ type === "contract_address" || type === "user_address" || type === "tx_hash" || - type === "block_height"; + type === "block_height" || + type === "pool_id"; const [hrefLink, textValue] = [ getNavigationUrl(type, currentChainName, copyValue || value), diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx index 46e18f362..836e739d8 100644 --- a/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx +++ b/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx @@ -1,5 +1,6 @@ import { Flex, Text } from "@chakra-ui/react"; +import { ExplorerLink } from "lib/components/ExplorerLink"; import { PoolLogo } from "lib/pages/pools/components/PoolLogo"; import type { TokenWithValue } from "lib/types"; import { getTokenLabel } from "lib/utils"; @@ -35,16 +36,14 @@ export const PoolAssets = ({ poolId, tokens, outAsset }: PoolAssetsProps) => ( color={token.denom === outAsset ? "honeydew.main" : "text.main"} > {token.symbol || getTokenLabel(token.denom)} - + {" "} / ))} - - {poolId} - + ); From a5353221ad895639d5b02d43da700c3b6949fabb Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 9 May 2023 15:56:30 +0700 Subject: [PATCH 12/32] fix: query fn error --- src/lib/services/poolService.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts index dd54a7a94..5e30af716 100644 --- a/src/lib/services/poolService.ts +++ b/src/lib/services/poolService.ts @@ -13,7 +13,7 @@ import { getPoolListCount, getPoolsByPoolIds, } from "lib/query"; -import type { Pool, PoolDetail, PoolTypeFilter } from "lib/types"; +import type { Option, Pool, PoolDetail, PoolTypeFilter } from "lib/types"; import { isPositiveInt } from "lib/utils"; import { usePoolExpression } from "./expression/poolExpression"; @@ -134,11 +134,13 @@ export const usePoolListCountQuery = ({ }; export const usePoolByPoolId = ( - poolId: number + poolId: Option ): UseQueryResult> => { const { indexerGraphClient } = useCelatoneApp(); const queryFn = useCallback(async () => { + if (!poolId) throw new Error("Pool ID not found (usePoolByPoolId)"); + return indexerGraphClient .request(getPoolByPoolId, { poolId, @@ -166,7 +168,9 @@ export const usePoolByPoolId = ( ); }, [poolId, indexerGraphClient]); - return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn); + return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn, { + enabled: !!poolId, + }); }; export const usePoolAssetsbyPoolIds = ( From 864e8258682a299f5ccaa96f12bda9e29833cbd2 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 9 May 2023 18:05:53 +0700 Subject: [PATCH 13/32] fix: remove superfluid table for non super pools --- .../pool-details/PoolRelatedTxs.tsx | 28 ++++++++++++------- src/lib/pages/pools/poolId.tsx | 2 +- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx index 988081e48..482607ac2 100644 --- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx +++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx @@ -15,9 +15,13 @@ import { PoolRelatedTxsTable } from "./tables/pool-txs"; interface PoolRelatedTxsProps { poolId: number; + isSuperfluid: boolean; } -export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => { +export const PoolRelatedTxs = ({ + poolId, + isSuperfluid, +}: PoolRelatedTxsProps) => { const { count: countAllTxs, countDisplay: countDisplayAllTxs } = usePoolTxsCount(poolId, "is_all"); const { count: countSwapTxs, countDisplay: countDisplaySwapTxs } = @@ -48,7 +52,9 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => { Swap LP Bonding - Superfluid + {isSuperfluid && ( + Superfluid + )} @@ -83,14 +89,16 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => { scrollComponentId={tableHeaderId} /> - - - + {isSuperfluid && ( + + + + )} diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx index de99b28ed..c434531e4 100644 --- a/src/lib/pages/pools/poolId.tsx +++ b/src/lib/pages/pools/poolId.tsx @@ -28,7 +28,7 @@ export const PoolId = () => { - + ); }; From 6568237bbabb970a6a3886639f168074f0e71c74 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 10 May 2023 11:28:26 +0700 Subject: [PATCH 14/32] fix: rename and structure --- src/lib/components/action-msg/MsgToken.tsx | 4 +- .../tables/pool-txs/PoolTxsMsg.tsx | 129 +++++++++++++++++ .../tables/pool-txs/PoolTxsTable.tsx | 4 +- .../tables/pool-txs/PoolTxsTableMultiRow.tsx | 29 ---- .../tables/pool-txs/PoolTxsTableRow.tsx | 130 ++---------------- .../tables/pool-txs/messages/index.tsx | 16 +-- .../swap/MsgSwapExactAmountInAction.tsx | 4 +- .../swap/MsgSwapExactAmountInDetail.tsx | 3 +- .../swap/MsgSwapExactAmountOutAction.tsx | 4 +- .../swap/MsgSwapExactAmountOutDetail.tsx | 3 +- .../swap/{ => components}/PoolRoute.tsx | 0 .../swap/{ => components}/PoolSwap.tsx | 2 +- .../messages/swap/components/index.ts | 2 + 13 files changed, 163 insertions(+), 167 deletions(-) create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx delete mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableMultiRow.tsx rename src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/{ => components}/PoolRoute.tsx (100%) rename src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/{ => components}/PoolSwap.tsx (97%) create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/index.ts diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx index 8e75c022e..7df78236a 100644 --- a/src/lib/components/action-msg/MsgToken.tsx +++ b/src/lib/components/action-msg/MsgToken.tsx @@ -9,14 +9,14 @@ interface MsgTokenProps { coin: Coin; symbol?: string; precision?: number; - fontWeight?: string; + fontWeight?: number; } export const MsgToken = ({ coin, symbol, precision, - fontWeight = "600", + fontWeight = 600, }: MsgTokenProps) => ( diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx new file mode 100644 index 000000000..f333f27b9 --- /dev/null +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx @@ -0,0 +1,129 @@ +import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react"; + +import { ExplorerLink } from "lib/components/ExplorerLink"; +import { CustomIcon } from "lib/components/icon"; +import { TableNoBorderRow } from "lib/components/table"; +import type { AssetInfosOpt } from "lib/services/assetService"; +import type { Message, Transaction } from "lib/types"; +import { dateFromNow, formatUTC } from "lib/utils"; + +import { PoolMsgAction, PoolMsgDetail } from "./messages"; + +interface PoolTxsMsgProps { + msgIndex: number; + message: Message; + transaction: Transaction; + assetInfos: AssetInfosOpt; + templateColumns: string; +} + +export const PoolTxsMsg = ({ + msgIndex, + message, + transaction, + assetInfos, + templateColumns, +}: PoolTxsMsgProps) => { + const { isOpen, onToggle } = useDisclosure(); + const msgDetailTemplateColumns = templateColumns + .split(" ") + .slice(0, 2) + .concat("1fr") + .join(" "); + + return ( + + + + {msgIndex === 0 && ( + <> + + {transaction.messages.length > 1 && ( + + {transaction.messages.length} + + )} + + )} + + + {msgIndex === 0 && + (transaction.success ? ( + + ) : ( + + ))} + + + + + + + + + + + {msgIndex === 0 && ( + + {formatUTC(transaction.created)} + + {`(${dateFromNow(transaction.created)})`} + + + )} + + + {transaction.success && ( + + + + )} + + {transaction.success && ( + + )} + + ); +}; diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx index 21b10296e..0b8020a2d 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx @@ -5,7 +5,7 @@ import type { AssetInfosOpt } from "lib/services/assetService"; import type { Option, Transaction } from "lib/types"; import { PoolTxsTableHeader } from "./PoolTxsTableHeader"; -import { PoolTxsTableMultiRow } from "./PoolTxsTableMultiRow"; +import { PoolTxsTableRow } from "./PoolTxsTableRow"; interface PoolTxsTableProps { transactions: Option; @@ -30,7 +30,7 @@ export const PoolTxsTable = ({ {transactions.map((transaction) => ( - ( - <> - {transaction.messages.map((message, index) => ( - - ))} - -); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx index f770f8138..d75cfdf81 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx @@ -1,129 +1,29 @@ -import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react"; - -import { ExplorerLink } from "lib/components/ExplorerLink"; -import { CustomIcon } from "lib/components/icon"; -import { TableNoBorderRow } from "lib/components/table"; import type { AssetInfosOpt } from "lib/services/assetService"; -import type { Message, Transaction } from "lib/types"; -import { dateFromNow, formatUTC } from "lib/utils"; +import type { Transaction } from "lib/types"; -import { PoolTxsAction, PoolTxsDetail } from "./messages"; +import { PoolTxsMsg } from "./PoolTxsMsg"; interface PoolTxsTableRowProps { - msgIndex: number; - message: Message; transaction: Transaction; assetInfos: AssetInfosOpt; templateColumns: string; } export const PoolTxsTableRow = ({ - msgIndex, - message, transaction, assetInfos, templateColumns, -}: PoolTxsTableRowProps) => { - const { isOpen, onToggle } = useDisclosure(); - const msgDetailTemplateColumns = templateColumns - .split(" ") - .slice(0, 2) - .concat("1fr") - .join(" "); - - return ( - - ( + <> + {transaction.messages.map((message, index) => ( + - - {msgIndex === 0 && ( - <> - - {transaction.messages.length > 1 && ( - - {transaction.messages.length} - - )} - - )} - - - {msgIndex === 0 && - (transaction.success ? ( - - ) : ( - - ))} - - - - - - - - - - - {msgIndex === 0 && ( - - {formatUTC(transaction.created)} - - {`(${dateFromNow(transaction.created)})`} - - - )} - - - {transaction.success && ( - - - - )} - - {transaction.success && ( - - )} - - ); -}; + /> + ))} + +); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx index 8c1022e61..fdb31ed41 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx @@ -11,7 +11,7 @@ import { MsgSwapExactAmountOutDetail, } from "./swap"; -export const PoolTxsAction = ({ +export const PoolMsgAction = ({ msg, assetInfos, }: { @@ -19,8 +19,7 @@ export const PoolTxsAction = ({ assetInfos: AssetInfosOpt; }) => { // TODO: fix and add cases - const { type } = msg; - switch (type) { + switch (msg.type) { case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn": case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn": return ( @@ -37,13 +36,12 @@ export const PoolTxsAction = ({ assetInfos={assetInfos} /> ); - case "type3": default: - return {type}; + return {msg.type}; } }; -export const PoolTxsDetail = ({ +export const PoolMsgDetail = ({ txHash, blockHeight, msgIndex, @@ -59,8 +57,7 @@ export const PoolTxsDetail = ({ isOpened: boolean; }) => { // TODO: fix and add cases - const { type } = msg; - switch (type) { + switch (msg.type) { case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn": case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn": return ( @@ -85,8 +82,7 @@ export const PoolTxsDetail = ({ isOpened={isOpened} /> ); - case "type3": default: - return {type}; + return {msg.type}; } }; diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx index a02413513..963010a55 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx @@ -24,7 +24,7 @@ export const MsgSwapExactAmountInAction = ({ coin={msg.tokenIn} symbol={inAssetInfo?.symbol} precision={inAssetInfo?.precision} - fontWeight="700" + fontWeight={700} /> at least @@ -32,7 +32,7 @@ export const MsgSwapExactAmountInAction = ({ coin={{ amount: msg.tokenOutMinAmount, denom: tokenOutDenom }} symbol={outAssetInfo?.symbol} precision={outAssetInfo?.precision} - fontWeight="400" + fontWeight={400} /> ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx index 175fc7231..5c0d85ffc 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx @@ -4,8 +4,7 @@ import type { MsgSwapExactAmountIn } from "../messages"; import { ExplorerLink } from "lib/components/ExplorerLink"; import type { AssetInfosOpt } from "lib/services/assetService"; -import { PoolRoute } from "./PoolRoute"; -import { PoolSwap } from "./PoolSwap"; +import { PoolRoute, PoolSwap } from "./components"; interface MsgSwapExactAmountInDetailProps { txHash: string; diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx index c24209740..7197cd6f5 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx @@ -24,14 +24,14 @@ export const MsgSwapExactAmountOutAction = ({ coin={{ amount: msg.tokenInMaxAmount, denom: tokenInDenom }} symbol={inAssetInfo?.symbol} precision={inAssetInfo?.precision} - fontWeight="400" + fontWeight={400} /> ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx index b38a72b1c..027f003af 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx @@ -4,8 +4,7 @@ import type { MsgSwapExactAmountOut } from "../messages"; import { ExplorerLink } from "lib/components/ExplorerLink"; import type { AssetInfosOpt } from "lib/services/assetService"; -import { PoolRoute } from "./PoolRoute"; -import { PoolSwap } from "./PoolSwap"; +import { PoolRoute, PoolSwap } from "./components"; interface MsgSwapExactAmountOutDetailProps { txHash: string; diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx similarity index 100% rename from src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolRoute.tsx rename to src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx similarity index 97% rename from src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolSwap.tsx rename to src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx index e57db5b70..3ecd16350 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolSwap.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx @@ -1,6 +1,6 @@ import { Flex, Text } from "@chakra-ui/react"; -import { AssetCard } from "../AssetCard"; +import { AssetCard } from "../../AssetCard"; import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; import { EmptyState } from "lib/components/state"; diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/index.ts new file mode 100644 index 000000000..de3b2ff47 --- /dev/null +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/index.ts @@ -0,0 +1,2 @@ +export * from "./PoolRoute"; +export * from "./PoolSwap"; From 825b6b709ae7c6f960fc760bfc5dd48ef9622ff7 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 10 May 2023 17:44:40 +0700 Subject: [PATCH 15/32] fix: pool txs accordion arrow to the front --- .../tables/pool-txs/PoolTxsMsg.tsx | 19 +++++++++---------- .../tables/pool-txs/PoolTxsTable.tsx | 2 +- .../tables/pool-txs/PoolTxsTableHeader.tsx | 2 +- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx index f333f27b9..150a7c874 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx @@ -46,6 +46,15 @@ export const PoolTxsMsg = ({ transition="all .25s ease-in-out" cursor="pointer" > + + {transaction.success && ( + + )} + {msgIndex === 0 && ( <> @@ -92,16 +101,6 @@ export const PoolTxsMsg = ({ )} - - {transaction.success && ( - - - - )} {transaction.success && ( diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableHeader.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableHeader.tsx index 0099e7331..2cf394e5c 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableHeader.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableHeader.tsx @@ -9,11 +9,11 @@ export const PoolTxsTableHeader = ({ templateColumns: GridProps["templateColumns"]; }) => ( + Transaction Hash Actions Sender Timestamp - ); From 5bcae7a508824d8776e6185a5e19e37f137b9dbe Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 11 May 2023 12:49:21 +0700 Subject: [PATCH 16/32] fix: refactor --- src/lib/components/AccordionStepperItem.tsx | 38 ++++++++----------- .../pool-assets/PoolAssetsTableHeader.tsx | 1 - 2 files changed, 16 insertions(+), 23 deletions(-) diff --git a/src/lib/components/AccordionStepperItem.tsx b/src/lib/components/AccordionStepperItem.tsx index cdea4f6f7..b81cc4427 100644 --- a/src/lib/components/AccordionStepperItem.tsx +++ b/src/lib/components/AccordionStepperItem.tsx @@ -1,18 +1,22 @@ +import type { FlexProps } from "@chakra-ui/react"; import { Flex } from "@chakra-ui/react"; +const AccordionStepperItemLine = (props: FlexProps) => ( + +); + export const AccordionStepperItem = () => ( - + ( borderColor="pebble.600" borderWidth="1px" /> - + ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx index 48d751563..9d7cffd7f 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx @@ -20,7 +20,6 @@ export const PoolAssetsTableHeader = ({ sx={{ "> div": { color: "text.dark" } }} > Asset - {poolType === "Stableswap" ? "Scaling Factor" : "Weight (%)"} From f4425d26c7197156e1c5f251848d17944275eeef Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 16 May 2023 11:16:27 +0700 Subject: [PATCH 17/32] feat: add lp messages --- src/lib/data/tx.ts | 2 + .../pools/components/PoolDetailHeader.tsx | 279 ------------------ src/lib/pages/pools/components/PoolHeader.tsx | 14 +- src/lib/pages/pools/components/PoolLogo.tsx | 4 +- .../pool-details/PoolRelatedTxs.tsx | 34 +-- .../pool-details/header/PoolHeader.tsx | 89 ------ .../pool-details/header/PoolLogo.tsx | 65 ---- .../components/pool-details/header/index.tsx | 13 +- .../tables/pool-txs/PoolTxsMsg.tsx | 30 +- .../tables/pool-txs/PoolTxsTable.tsx | 11 +- .../tables/pool-txs/PoolTxsTableRow.tsx | 56 +++- .../pool-details/tables/pool-txs/index.tsx | 10 +- .../pool-txs/messages/PoolOtherMsgs.tsx | 25 ++ .../messages/{ => components}/AssetCard.tsx | 0 .../messages/components/PoolLogoLink.tsx | 23 ++ .../pool-txs/messages/components/index.ts | 2 + .../tables/pool-txs/messages/index.tsx | 188 ++++++++++-- .../messages/lp/MsgExitPoolAction.tsx | 56 ++++ .../messages/lp/MsgExitPoolDetail.tsx | 56 ++++ .../lp/MsgExitSwapExternAmountOutAction.tsx | 46 +++ .../lp/MsgExitSwapExternAmountOutDetail.tsx | 57 ++++ .../lp/MsgExitSwapShareAmountInAction.tsx | 47 +++ .../lp/MsgExitSwapShareAmountInDetail.tsx | 57 ++++ .../messages/lp/MsgJoinPoolAction.tsx | 56 ++++ .../messages/lp/MsgJoinPoolDetail.tsx | 56 ++++ .../lp/MsgJoinSwapExternAmountInAction.tsx | 47 +++ .../lp/MsgJoinSwapExternAmountInDetail.tsx | 56 ++++ .../lp/MsgJoinSwapShareAmountOutAction.tsx | 46 +++ .../lp/MsgJoinSwapShareAmountOutDetail.tsx | 56 ++++ .../lp/components/LiquidityDivider.tsx | 11 + .../messages/lp/components/PoolAssetCard.tsx | 137 +++++++++ .../messages/lp/components/PoolAssetsGrid.tsx | 95 ++++++ .../pool-txs/messages/lp/components/index.ts | 3 + .../tables/pool-txs/messages/lp/index.ts | 12 + .../tables/pool-txs/messages/messages.ts | 18 -- .../swap/MsgSwapExactAmountInAction.tsx | 10 +- .../swap/MsgSwapExactAmountInDetail.tsx | 4 +- .../swap/MsgSwapExactAmountOutAction.tsx | 10 +- .../swap/MsgSwapExactAmountOutDetail.tsx | 6 +- .../messages/swap/components/PoolRoute.tsx | 6 +- .../messages/swap/components/PoolSwap.tsx | 11 +- .../tables/pool-txs/messages/utils.ts | 75 +++++ .../components/supportedSection/PoolCard.tsx | 2 +- .../UnsupportedPoolCard.tsx | 2 +- src/lib/pages/pools/poolId.tsx | 6 +- .../tx-message/msg-receipts/index.tsx | 4 +- src/lib/types/tx/transaction.ts | 10 +- src/lib/utils/tx/types.ts | 14 +- 48 files changed, 1348 insertions(+), 569 deletions(-) delete mode 100644 src/lib/pages/pools/components/PoolDetailHeader.tsx delete mode 100644 src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx delete mode 100644 src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx rename src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/{ => components}/AssetCard.tsx (100%) create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetCard.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/index.ts delete mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/messages.ts create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts diff --git a/src/lib/data/tx.ts b/src/lib/data/tx.ts index fbad20b3c..fd00485e4 100644 --- a/src/lib/data/tx.ts +++ b/src/lib/data/tx.ts @@ -51,6 +51,8 @@ export type TypeUrl = | "/ibc.core.channel.v1.MsgTimeoutOnClose" | "/ibc.core.channel.v1.MsgAcknowledgement" // osmosis + | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn" + | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut" | "/osmosis.gamm.poolmodels.balancer.v1beta1.MsgCreateBalancerPool" | "/osmosis.gamm.poolmodels.stableswap.v1beta1.MsgCreateStableswapPool" | "/osmosis.gamm.poolmodels.stableswap.v1beta1.MsgStableSwapAdjustScalingFactors" diff --git a/src/lib/pages/pools/components/PoolDetailHeader.tsx b/src/lib/pages/pools/components/PoolDetailHeader.tsx deleted file mode 100644 index aba698ad7..000000000 --- a/src/lib/pages/pools/components/PoolDetailHeader.tsx +++ /dev/null @@ -1,279 +0,0 @@ -import { - Button, - Flex, - Box, - IconButton, - Text, - Tag, - Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalBody, - ModalCloseButton, - Heading, - useDisclosure, - chakra, - Tooltip, -} from "@chakra-ui/react"; -import { useWallet } from "@cosmos-kit/react"; - -import { getAddressTypeByLength } from "lib/app-provider"; -import { BackButton } from "lib/components/button"; -import { ExplorerLink } from "lib/components/ExplorerLink"; -import { CustomIcon } from "lib/components/icon"; -import JsonReadOnly from "lib/components/json/JsonReadOnly"; -import type { PoolDetail } from "lib/types/pool"; -import { formatRatio, jsonPrettify, truncate } from "lib/utils"; - -import { PoolHeader } from "./PoolHeader"; - -interface PoolDetailHeaderProp { - pool: PoolDetail; -} -const unwrapScalingFactor = ({ - scalingFactors, - scalingFactorController, -}: PoolDetail) => ({ - scalingFactors, - scalingFactorController, -}); - -const StyledTextLabel = chakra(Text, { - baseStyle: { - color: "text.dark", - fontSize: "14px", - fontWeight: "600", - letterSpacing: "0.1px", - }, -}); -const StyledTextContent = chakra(Text, { - baseStyle: { - color: "text.main", - letterSpacing: "0.1px", - fontSize: "14px", - }, -}); -export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => { - const { currentChainName } = useWallet(); - const { - isOpen: isModalWeightOpen, - onClose: onModalWeightClose, - onOpen: onModalWeightOpen, - } = useDisclosure(); - const { - isOpen: isModalScalingOpen, - onClose: onModalScalingClose, - onOpen: onModalScalingOpen, - } = useDisclosure(); - - return ( - <> - - - - - - - } - /> - - - - - Pool ID - {pool.id} - - - Created Height - - {pool.blockHeight} - - - - Pool Created by - - - - - - - Swap Fee - - - - - - - {formatRatio(pool.swapFee)} - - - - Exit Fee - - - - - - - {formatRatio(pool.exitFee)} - - - Future Governor - - {pool.futurePoolGovernor} - - - {pool.smoothWeightChangeParams && ( - - Smooth weight change params - - View JSON - - - - - - - - - - Smooth weight change params - - - - - - - - - - - - )} - {pool.scalingFactors && ( - - Scaling Factor - - View JSON - - - - - - - - - - Scaling Factor - - - - - - - - - - - - )} - - - ); -}; diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx index 87691a588..4f542fec4 100644 --- a/src/lib/pages/pools/components/PoolHeader.tsx +++ b/src/lib/pages/pools/components/PoolHeader.tsx @@ -1,21 +1,23 @@ import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react"; +import type Big from "big.js"; import { BALANCER_ICON, STABLESWAP_ICON, SUPERFLUID_ICON } from "../constant"; +import type { TokenWithValue } from "lib/types"; import type { PoolDetail } from "lib/types/pool"; import { getTokenLabel } from "lib/utils"; import { PoolLogo } from "./PoolLogo"; interface PoolHeaderProps { - poolId: PoolDetail["id"]; - isSuperFluid: PoolDetail["isSuperfluid"]; - poolType: PoolDetail["type"]; - poolLiquidity: PoolDetail["poolLiquidity"]; + poolId: PoolDetail["id"]; + isSuperfluid: PoolDetail["isSuperfluid"]; + poolType: PoolDetail["type"]; + poolLiquidity: PoolDetail["poolLiquidity"]; } export const PoolHeader = ({ poolId, - isSuperFluid, + isSuperfluid, poolType, poolLiquidity, }: PoolHeaderProps) => ( @@ -89,7 +91,7 @@ export const PoolHeader = ({ )} - {isSuperFluid && ( + {isSuperfluid && ( { const renderLogo = (token: TokenWithValue, i: number) => ( @@ -33,7 +35,7 @@ export const PoolLogo = ({ marginLeft, }, }} - width="96px" + minW={minW} alignItems="center" justifyContent="center" > diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx index 482607ac2..299b61e26 100644 --- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx +++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx @@ -7,31 +7,29 @@ import { TabPanels, TabPanel, } from "@chakra-ui/react"; +import type Big from "big.js"; import { usePoolTxsCount } from "../../data"; import { CustomTab } from "lib/components/CustomTab"; +import type { PoolDetail, TokenWithValue } from "lib/types"; import { PoolRelatedTxsTable } from "./tables/pool-txs"; interface PoolRelatedTxsProps { - poolId: number; - isSuperfluid: boolean; + pool: PoolDetail; } -export const PoolRelatedTxs = ({ - poolId, - isSuperfluid, -}: PoolRelatedTxsProps) => { +export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => { const { count: countAllTxs, countDisplay: countDisplayAllTxs } = - usePoolTxsCount(poolId, "is_all"); + usePoolTxsCount(pool.id, "is_all"); const { count: countSwapTxs, countDisplay: countDisplaySwapTxs } = - usePoolTxsCount(poolId, "is_swap"); + usePoolTxsCount(pool.id, "is_swap"); const { count: countLpTxs, countDisplay: countDisplayLpTxs } = - usePoolTxsCount(poolId, "is_lp"); + usePoolTxsCount(pool.id, "is_lp"); const { count: countBondTxs, countDisplay: countDisplayBondTxs } = - usePoolTxsCount(poolId, "is_bond"); + usePoolTxsCount(pool.id, "is_bond"); const { count: countSuperfluidTxs, countDisplay: countDisplaySuperfluidTxs } = - usePoolTxsCount(poolId, "is_superfluid"); + usePoolTxsCount(pool.id, "is_superfluid"); const tableHeaderId = "poolTableHeader"; return ( @@ -52,14 +50,14 @@ export const PoolRelatedTxs = ({ Swap LP Bonding - {isSuperfluid && ( + {pool.isSuperfluid && ( Superfluid )} - {isSuperfluid && ( + {pool.isSuperfluid && ( ; - assetInfos: AssetInfosOpt; -} - -export const PoolHeader = ({ pool, assetInfos }: PoolHeaderProps) => { - const { poolLiquidity, id: poolId, type: poolType, isSuperfluid } = pool; - return ( - - - - span": { - display: "none", - }, - }} - > - {poolLiquidity.slice(0, 4).map((item) => ( - - {assetInfos?.[item.denom]?.symbol ?? getTokenLabel(item.denom)} - - / - - - ))} - {poolLiquidity.length > 4 && ( - - - / - - + {poolLiquidity.length - 4} - - )} - - - - #{poolId} - - {poolType && ( - - - - - - {poolType === "Balancer" - ? "Balancer Pool" - : "StableSwap Pool"} - - - - )} - {isSuperfluid && ( - - - - - - Superfluid - - - - )} - - - - ); -}; diff --git a/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx deleted file mode 100644 index 1aa656913..000000000 --- a/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Flex, Image } from "@chakra-ui/react"; -import type Big from "big.js"; - -import { getUndefinedTokenIcon } from "../../../utils"; -import type { AssetInfosOpt } from "lib/services/assetService"; -import type { TokenWithValue } from "lib/types"; -import type { PoolDetail } from "lib/types/pool"; - -interface PoolLogoProps { - poolLiquidity: PoolDetail["poolLiquidity"]; - assetInfos: AssetInfosOpt; -} - -export const PoolLogo = ({ poolLiquidity, assetInfos }: PoolLogoProps) => { - return ( - img:not(:first-of-type), > div": { - marginLeft: "-12px", - }, - }} - width="96px" - alignItems="center" - justifyContent="center" - > - {poolLiquidity.length > 3 ? ( - <> - {poolLiquidity.slice(0, 2).map((asset, i) => ( - - ))} - - +{poolLiquidity.length - 2} - - - ) : ( - poolLiquidity.map((item, i) => ( - - )) - )} - - ); -}; diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx index 31408a12c..88720ad46 100644 --- a/src/lib/pages/pools/components/pool-details/header/index.tsx +++ b/src/lib/pages/pools/components/pool-details/header/index.tsx @@ -2,22 +2,20 @@ import { Button, Flex } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; import type Big from "big.js"; +import { PoolHeader } from "../../PoolHeader"; import { getPoolUrl } from "lib/app-fns/explorer"; import { useLCDEndpoint } from "lib/app-provider"; import { CustomIcon } from "lib/components/icon"; import { openNewTab } from "lib/hooks"; -import type { AssetInfosOpt } from "lib/services/assetService"; import type { PoolDetail, TokenWithValue } from "lib/types"; -import { PoolHeader } from "./PoolHeader"; import { PoolInfo } from "./PoolInfo"; interface PoolTopSectionProps { pool: PoolDetail; - assetInfos: AssetInfosOpt; } -export const PoolTopSection = ({ pool, assetInfos }: PoolTopSectionProps) => { +export const PoolTopSection = ({ pool }: PoolTopSectionProps) => { const { currentChainName } = useWallet(); const lcdEndpoint = useLCDEndpoint(); @@ -28,7 +26,12 @@ export const PoolTopSection = ({ pool, assetInfos }: PoolTopSectionProps) => { return ( <> - +