From cb930e359234547b3ea69b29d936638d564a6597 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Mon, 18 Mar 2024 13:50:48 +0700 Subject: [PATCH 01/20] refactor(types): update zod validation schema to apply with new api spec --- src/lib/services/validator.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts index 498a8337f..37a2b8a22 100644 --- a/src/lib/services/validator.ts +++ b/src/lib/services/validator.ts @@ -214,13 +214,18 @@ export const getValidatorUptime = async ( }) .then(({ data }) => parseWithError(zValidatorUptimeResponse, data)); +const zValidatorDelegationRelatedTxsResponseMessage = z.object({ + type: z.string(), +}); + const zValidatorDelegationRelatedTxsResponseItem = z .object({ tx_hash: z.string(), height: z.number().positive(), tokens: zCoin.array(), timestamp: zUtcDate, - validator_address: zValidatorAddr, + messages: z.array(zValidatorDelegationRelatedTxsResponseMessage), + sender: zValidatorAddr, }) .transform(snakeToCamel); From bbd8b7a8481ef5e45f788bf3ab2890e67cf30d1f Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Mon, 18 Mar 2024 13:59:08 +0700 Subject: [PATCH 02/20] feat: update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b64ffd1e0..4d5bab402 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 +- [#831](https://github.com/alleslabs/celatone-frontend/pull/831) Update zod schema to apply with new validator delegation related txs api spec - [#828](https://github.com/alleslabs/celatone-frontend/pull/828) Add validator detail voting power overview section with data from APIs - [#819](https://github.com/alleslabs/celatone-frontend/pull/819) Add validator detail overview section with data from APIs - [#821](https://github.com/alleslabs/celatone-frontend/pull/821) Add Validator's proposed blocks table From ca5bc6ca26f49f8012ca23f25b842fcffb388937 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 19 Mar 2024 14:39:10 +0700 Subject: [PATCH 03/20] feat(components): add bonded token changes delegation related transactions table desktop --- .../components/bonded-token-changes/index.tsx | 94 ++++++++++-- .../tables/RelatedTransactionsTable.tsx | 21 --- .../components/tables/index.ts | 2 +- .../RelatedTransactionsTable.tsx | 41 +++++ .../RelatedTransactionsTableHeader.tsx | 21 +++ .../RelatedTransactionsTableRow.tsx | 145 ++++++++++++++++++ .../tables/related-transactions/index.ts | 1 + src/lib/services/validator.ts | 15 +- src/lib/services/validatorService.ts | 10 +- src/lib/types/asset.ts | 1 + src/lib/utils/formatter/token.ts | 15 +- 11 files changed, 323 insertions(+), 43 deletions(-) delete mode 100644 src/lib/pages/validator-details/components/tables/RelatedTransactionsTable.tsx create mode 100644 src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx create mode 100644 src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableHeader.tsx create mode 100644 src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx create mode 100644 src/lib/pages/validator-details/components/tables/related-transactions/index.ts diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx index 5cf7f8200..5ee88388f 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx @@ -1,6 +1,11 @@ -import { Flex } from "@chakra-ui/react"; +import { Box, Flex } from "@chakra-ui/react"; -import { RelatedTransactionTable } from "../tables/RelatedTransactionsTable"; +import { RelatedTransactionTable } from "../tables"; +import { useMobile } from "lib/app-provider"; +import { Pagination } from "lib/components/pagination"; +import { usePaginator } from "lib/components/pagination/usePaginator"; +import { TableTitle } from "lib/components/table"; +import { useValidatorDelegationRelatedTxs } from "lib/services/validatorService"; import type { AssetInfos, Option, ValidatorAddr } from "lib/types"; import { VotingPowerChart } from "./VotingPowerChart"; @@ -15,13 +20,78 @@ export const BondedTokenChanges = ({ validatorAddress, singleStakingDenom, assetInfos, -}: BondedTokenChangesProps) => ( - - - - -); +}: BondedTokenChangesProps) => { + const isMobile = useMobile(); + + const { + pagesQuantity, + setTotalData, + currentPage, + setCurrentPage, + pageSize, + setPageSize, + offset, + } = usePaginator({ + initialState: { + pageSize: 10, + currentPage: 1, + isDisabled: false, + }, + }); + + const { data, isLoading } = useValidatorDelegationRelatedTxs( + validatorAddress, + pageSize, + offset, + { + onSuccess: ({ total }) => setTotalData(total), + } + ); + + const tableHeaderId = "relatedTransactionTableHeader"; + + return ( + + + + {isMobile ? ( +
Is Mobile
+ ) : ( + <> + + + + )} + {!!data?.total && data.total > 10 && ( + { + const size = Number(e.target.value); + setPageSize(size); + setCurrentPage(1); + }} + /> + )} + + + ); +}; diff --git a/src/lib/pages/validator-details/components/tables/RelatedTransactionsTable.tsx b/src/lib/pages/validator-details/components/tables/RelatedTransactionsTable.tsx deleted file mode 100644 index 4183138bd..000000000 --- a/src/lib/pages/validator-details/components/tables/RelatedTransactionsTable.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Flex, Heading, Text } from "@chakra-ui/react"; - -import { useMobile } from "lib/app-provider"; - -export const RelatedTransactionTable = () => { - const isMobile = useMobile(); - return isMobile ? ( - mobile table - ) : ( - - - Delegation-Related Transactions - - - Shows transactions relevant to changes in delegated tokens, excluding - any token reduction due to slashing. - - table - - ); -}; diff --git a/src/lib/pages/validator-details/components/tables/index.ts b/src/lib/pages/validator-details/components/tables/index.ts index 1ce862e1b..112205369 100644 --- a/src/lib/pages/validator-details/components/tables/index.ts +++ b/src/lib/pages/validator-details/components/tables/index.ts @@ -1,3 +1,3 @@ export * from "./ProposedBlocksTable"; -export * from "./RelatedTransactionsTable"; +export * from "./related-transactions"; export * from "./VotedProposalsTable"; diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx new file mode 100644 index 000000000..cc8004569 --- /dev/null +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx @@ -0,0 +1,41 @@ +import { Box } from "@interchain-ui/react"; + +import { Loading } from "lib/components/Loading"; +import { TableContainer } from "lib/components/table"; +import type { ValidatorDelegationRelatedTxsResponseItem } from "lib/services/validator"; +import type { AssetInfos, Option } from "lib/types"; + +import { RelatedTransactionsTableHeader } from "./RelatedTransactionsTableHeader"; +import { RelatedTransactionsTableRow } from "./RelatedTransactionsTableRow"; + +interface RelatedTransactionTableProps { + delegationRelatedTxs: Option; + isLoading: boolean; + assetInfos: Option; +} + +export const RelatedTransactionTable = ({ + delegationRelatedTxs = [], + isLoading, + assetInfos, +}: RelatedTransactionTableProps) => { + if (isLoading) return ; + + const templateColumns = "1fr 1fr 1fr 1fr 1fr"; + + return ( + + + + {delegationRelatedTxs.map((delegationRelatedTx) => ( + + ))} + + + ); +}; diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableHeader.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableHeader.tsx new file mode 100644 index 000000000..b8becd2b2 --- /dev/null +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableHeader.tsx @@ -0,0 +1,21 @@ +import { Grid } from "@chakra-ui/react"; + +import { TableHeader } from "lib/components/table"; + +interface RelatedTransactionsTableHeaderProps { + templateColumns: string; +} + +export const RelatedTransactionsTableHeader = ({ + templateColumns, +}: RelatedTransactionsTableHeaderProps) => ( + + Transaction Hash + Sender + Action + + Bonded Token Changes + + Timestamp + +); diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx new file mode 100644 index 000000000..1de4c6702 --- /dev/null +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx @@ -0,0 +1,145 @@ +import { Badge, Box, Flex, Grid, Text } from "@chakra-ui/react"; +import type { BigSource } from "big.js"; + +import { ExplorerLink } from "lib/components/ExplorerLink"; +import { TableRow } from "lib/components/table"; +import { TokenImageRender } from "lib/components/token"; +import { getUndefinedTokenIcon } from "lib/pages/pools/utils"; +import type { ValidatorDelegationRelatedTxsResponseItem } from "lib/services/validator"; +import type { AssetInfos, Coin, Option, USD } from "lib/types"; +import { + coinToTokenWithValue, + dateFromNow, + extractMsgType, + formatPrice, + formatUTC, + formatUTokenWithPrecision, +} from "lib/utils"; + +interface RelatedTransactionsBondedTokenChangesProps { + txHash: string; + token: Coin; + assetInfos: Option; +} + +const RelatedTransactionsBondedTokenChanges = ({ + txHash, + token, + assetInfos, +}: RelatedTransactionsBondedTokenChangesProps) => { + const tokenWithValue = coinToTokenWithValue( + token?.denom, + token?.amount, + assetInfos + ); + + const formattedAmount = formatUTokenWithPrecision( + tokenWithValue.amount, + tokenWithValue.precision ?? 0, + false, + 2, + true + ); + + const isPositiveAmount = tokenWithValue.amount.gte(0); + + return ( + + + + + {formattedAmount} + {" "} + {tokenWithValue.symbol} + + + ({formatPrice(tokenWithValue.value?.abs() as USD)}) + + + + + ); +}; + +interface RelatedTransactionsTableRowProps { + delegationRelatedTx: ValidatorDelegationRelatedTxsResponseItem; + templateColumns: string; + assetInfos: Option; +} + +export const RelatedTransactionsTableRow = ({ + delegationRelatedTx, + templateColumns, + assetInfos, +}: RelatedTransactionsTableRowProps) => { + return ( + + + + {delegationRelatedTx.messages.length > 1 && ( + + {delegationRelatedTx.messages.length} + + )} + + + + + + + {delegationRelatedTx.messages.length > 1 + ? `${delegationRelatedTx.messages.length} Messages` + : extractMsgType(delegationRelatedTx.messages[0].type)} + + + + {delegationRelatedTx.tokens.map((token) => ( + + ))} + + + + + {formatUTC(delegationRelatedTx.timestamp)} + + + {`(${dateFromNow(delegationRelatedTx.timestamp)})`} + + + + + ); +}; diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/index.ts b/src/lib/pages/validator-details/components/tables/related-transactions/index.ts new file mode 100644 index 000000000..bc62e3984 --- /dev/null +++ b/src/lib/pages/validator-details/components/tables/related-transactions/index.ts @@ -0,0 +1 @@ +export * from "./RelatedTransactionsTable"; diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts index 37a2b8a22..034da15f9 100644 --- a/src/lib/services/validator.ts +++ b/src/lib/services/validator.ts @@ -12,7 +12,12 @@ import { zValidatorAddr, zValidatorData, } from "lib/types"; -import { parseWithError, removeSpecialChars, snakeToCamel } from "lib/utils"; +import { + parseTxHash, + parseWithError, + removeSpecialChars, + snakeToCamel, +} from "lib/utils"; import { zBlocksResponse } from "./block"; import { zProposal } from "./proposal"; @@ -227,7 +232,13 @@ const zValidatorDelegationRelatedTxsResponseItem = z messages: z.array(zValidatorDelegationRelatedTxsResponseMessage), sender: zValidatorAddr, }) - .transform(snakeToCamel); + .transform((val) => ({ + ...snakeToCamel(val), + txHash: parseTxHash(val.tx_hash), + })); +export type ValidatorDelegationRelatedTxsResponseItem = z.infer< + typeof zValidatorDelegationRelatedTxsResponseItem +>; const zValidatorDelegationRelatedTxsResponse = z.object({ items: z.array(zValidatorDelegationRelatedTxsResponseItem), diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts index c390dbea3..2ee12ce50 100644 --- a/src/lib/services/validatorService.ts +++ b/src/lib/services/validatorService.ts @@ -168,7 +168,11 @@ export const useValidatorUptime = ( export const useValidatorDelegationRelatedTxs = ( validatorAddress: ValidatorAddr, limit: number, - offset: number + offset: number, + options: Pick< + UseQueryOptions, + "onSuccess" + > = {} ) => { const endpoint = useBaseApiRoute("validators"); @@ -177,6 +181,8 @@ export const useValidatorDelegationRelatedTxs = ( CELATONE_QUERY_KEYS.VALIDATOR_DELEGATION_RELATED_TXS, endpoint, validatorAddress, + limit, + offset, ], async () => getValidatorDelegationRelatedTxs( @@ -185,7 +191,7 @@ export const useValidatorDelegationRelatedTxs = ( limit, offset ), - { retry: 1 } + { retry: 1, ...options } ); }; diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts index 6cfe6690b..0d649602b 100644 --- a/src/lib/types/asset.ts +++ b/src/lib/types/asset.ts @@ -7,6 +7,7 @@ export const zCoin = z.object({ denom: z.string(), amount: z.string(), }); +export type Coin = z.infer; export const zAssetInfo = z.object({ coingecko: z.string(), diff --git a/src/lib/utils/formatter/token.ts b/src/lib/utils/formatter/token.ts index e6eb779b0..01b02271c 100644 --- a/src/lib/utils/formatter/token.ts +++ b/src/lib/utils/formatter/token.ts @@ -53,7 +53,7 @@ export const toToken = ( ): Token => { try { const value = big(uAmount).div(big(10).pow(precision)); - return (value.gte(0) ? value : big(0)) as Token; + return value as Token; } catch { return big(0) as Token; } @@ -68,18 +68,23 @@ export const formatUTokenWithPrecision = ( amount: U>, precision: number, isSuffix = true, - decimalPoints?: number + decimalPoints?: number, + allowNegativeValue = false ): string => { const token = toToken(amount, precision); + if (isSuffix) { if (token.gte(B)) return `${d2Formatter(token.div(B), "0.00")}B`; if (token.gte(M)) return `${d2Formatter(token.div(M), "0.00")}M`; if (token.gte(K)) return `${d2Formatter(token, "0.00")}`; } - const lowestThreshold = big(10).pow(-(decimalPoints ?? precision)); - if (!token.eq(0) && token.lt(lowestThreshold)) { - return `<${lowestThreshold.toFixed()}`; + if (!allowNegativeValue) { + const lowestThreshold = big(10).pow(-(decimalPoints ?? precision)); + + if (!token.eq(0) && token.lt(lowestThreshold)) { + return `<${lowestThreshold.toFixed()}`; + } } return formatDecimal({ From 0a0ae17c042d628a74609c6c99b4b0364b620b1e Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 19 Mar 2024 14:43:07 +0700 Subject: [PATCH 04/20] feat: update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d5bab402..e8f6fa427 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 +- [#832](https://github.com/alleslabs/celatone-frontend/pull/832) Add bonded token changes delegation related transactions - [#831](https://github.com/alleslabs/celatone-frontend/pull/831) Update zod schema to apply with new validator delegation related txs api spec - [#828](https://github.com/alleslabs/celatone-frontend/pull/828) Add validator detail voting power overview section with data from APIs - [#819](https://github.com/alleslabs/celatone-frontend/pull/819) Add validator detail overview section with data from APIs From 3d0fc9b29ee99f413e601b92049321123d9eccc3 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 19 Mar 2024 15:35:21 +0700 Subject: [PATCH 05/20] feat(components): delegation related transactions mobile card view --- .../components/bonded-token-changes/index.tsx | 11 ++- .../RelatedTransactionsBondedTokenChanges.tsx | 71 ++++++++++++++ .../RelatedTransactionsMobileCard.tsx | 96 +++++++++++++++++++ .../RelatedTransactionsTable.tsx | 26 +++-- .../RelatedTransactionsTableRow.tsx | 76 +-------------- .../tables/related-transactions/index.ts | 1 + src/lib/services/validator.ts | 10 +- 7 files changed, 197 insertions(+), 94 deletions(-) create mode 100644 src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx create mode 100644 src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsMobileCard.tsx diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx index 5ee88388f..e5d6c62c5 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx @@ -1,6 +1,9 @@ import { Box, Flex } from "@chakra-ui/react"; -import { RelatedTransactionTable } from "../tables"; +import { + RelatedTransactionsMobileCard, + RelatedTransactionTable, +} from "../tables"; import { useMobile } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; @@ -59,7 +62,11 @@ export const BondedTokenChanges = ({ /> {isMobile ? ( -
Is Mobile
+ ) : ( <> ; +} + +export const RelatedTransactionsBondedTokenChanges = ({ + txHash, + token, + assetInfos, +}: RelatedTransactionsBondedTokenChangesProps) => { + const tokenWithValue = coinToTokenWithValue( + token?.denom, + token?.amount, + assetInfos + ); + + const formattedAmount = formatUTokenWithPrecision( + tokenWithValue.amount, + tokenWithValue.precision ?? 0, + false, + 2, + true + ); + + const isPositiveAmount = tokenWithValue.amount.gte(0); + + return ( + + + + + {formattedAmount} + {" "} + {tokenWithValue.symbol} + + + ({formatPrice(tokenWithValue.value?.abs() as USD)}) + + + + + ); +}; diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsMobileCard.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsMobileCard.tsx new file mode 100644 index 000000000..b2c8e7719 --- /dev/null +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsMobileCard.tsx @@ -0,0 +1,96 @@ +import { Badge, Box, Flex, Grid, GridItem, Text } from "@chakra-ui/react"; + +import { ExplorerLink } from "lib/components/ExplorerLink"; +import { Loading } from "lib/components/Loading"; +import { MobileCardTemplate, MobileTableContainer } from "lib/components/table"; +import type { ValidatorDelegationRelatedTxsResponseItem } from "lib/services/validator"; +import type { AssetInfos, Option } from "lib/types"; +import { dateFromNow, extractMsgType, formatUTC } from "lib/utils"; + +import { RelatedTransactionsBondedTokenChanges } from "./RelatedTransactionsBondedTokenChanges"; + +interface RelatedTransactionsMobileCardProps { + delegationRelatedTxs: Option; + isLoading: boolean; + assetInfos: Option; +} + +export const RelatedTransactionsMobileCard = ({ + delegationRelatedTxs, + isLoading, + assetInfos, +}: RelatedTransactionsMobileCardProps) => { + if (isLoading) return ; + + return ( + + {delegationRelatedTxs?.map((delegationRelatedTx) => ( + + + + + Transaction Hash + + + {delegationRelatedTx.messages.length > 1 && ( + + {delegationRelatedTx.messages.length} + + )} + + + + Sender + + + + + + + Action + + + {delegationRelatedTx.messages.length > 1 + ? `${delegationRelatedTx.messages.length} Messages` + : extractMsgType(delegationRelatedTx.messages[0].type)} + + + + + Bonded Token Changes + + {delegationRelatedTx.tokens.map((token) => ( + + ))} + + + } + bottomContent={ + + + {formatUTC(delegationRelatedTx.timestamp)} + + + {`(${dateFromNow(delegationRelatedTx.timestamp)})`} + + + } + /> + ))} + + ); +}; diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx index cc8004569..106e114f6 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx @@ -1,5 +1,3 @@ -import { Box } from "@interchain-ui/react"; - import { Loading } from "lib/components/Loading"; import { TableContainer } from "lib/components/table"; import type { ValidatorDelegationRelatedTxsResponseItem } from "lib/services/validator"; @@ -24,18 +22,16 @@ export const RelatedTransactionTable = ({ const templateColumns = "1fr 1fr 1fr 1fr 1fr"; return ( - - - - {delegationRelatedTxs.map((delegationRelatedTx) => ( - - ))} - - + + + {delegationRelatedTxs.map((delegationRelatedTx) => ( + + ))} + ); }; diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx index 1de4c6702..01bfa5933 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx @@ -1,80 +1,12 @@ -import { Badge, Box, Flex, Grid, Text } from "@chakra-ui/react"; -import type { BigSource } from "big.js"; +import { Badge, Box, Grid, Text } from "@chakra-ui/react"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { TableRow } from "lib/components/table"; -import { TokenImageRender } from "lib/components/token"; -import { getUndefinedTokenIcon } from "lib/pages/pools/utils"; import type { ValidatorDelegationRelatedTxsResponseItem } from "lib/services/validator"; -import type { AssetInfos, Coin, Option, USD } from "lib/types"; -import { - coinToTokenWithValue, - dateFromNow, - extractMsgType, - formatPrice, - formatUTC, - formatUTokenWithPrecision, -} from "lib/utils"; +import type { AssetInfos, Option } from "lib/types"; +import { dateFromNow, extractMsgType, formatUTC } from "lib/utils"; -interface RelatedTransactionsBondedTokenChangesProps { - txHash: string; - token: Coin; - assetInfos: Option; -} - -const RelatedTransactionsBondedTokenChanges = ({ - txHash, - token, - assetInfos, -}: RelatedTransactionsBondedTokenChangesProps) => { - const tokenWithValue = coinToTokenWithValue( - token?.denom, - token?.amount, - assetInfos - ); - - const formattedAmount = formatUTokenWithPrecision( - tokenWithValue.amount, - tokenWithValue.precision ?? 0, - false, - 2, - true - ); - - const isPositiveAmount = tokenWithValue.amount.gte(0); - - return ( - - - - - {formattedAmount} - {" "} - {tokenWithValue.symbol} - - - ({formatPrice(tokenWithValue.value?.abs() as USD)}) - - - - - ); -}; +import { RelatedTransactionsBondedTokenChanges } from "./RelatedTransactionsBondedTokenChanges"; interface RelatedTransactionsTableRowProps { delegationRelatedTx: ValidatorDelegationRelatedTxsResponseItem; diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/index.ts b/src/lib/pages/validator-details/components/tables/related-transactions/index.ts index bc62e3984..510db6bb2 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/index.ts +++ b/src/lib/pages/validator-details/components/tables/related-transactions/index.ts @@ -1 +1,2 @@ export * from "./RelatedTransactionsTable"; +export * from "./RelatedTransactionsMobileCard"; diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts index 034da15f9..fb014df1f 100644 --- a/src/lib/services/validator.ts +++ b/src/lib/services/validator.ts @@ -219,17 +219,17 @@ export const getValidatorUptime = async ( }) .then(({ data }) => parseWithError(zValidatorUptimeResponse, data)); -const zValidatorDelegationRelatedTxsResponseMessage = z.object({ - type: z.string(), -}); - const zValidatorDelegationRelatedTxsResponseItem = z .object({ tx_hash: z.string(), height: z.number().positive(), tokens: zCoin.array(), timestamp: zUtcDate, - messages: z.array(zValidatorDelegationRelatedTxsResponseMessage), + messages: z.array( + z.object({ + type: z.string(), + }) + ), sender: zValidatorAddr, }) .transform((val) => ({ From 3fe242930cf1b60ad4d9cf4d6ff77e00f2eb1dd3 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 19 Mar 2024 15:47:59 +0700 Subject: [PATCH 06/20] feat(components): update related transactions table fraction --- .../tables/related-transactions/RelatedTransactionsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx index 106e114f6..322dc666b 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx @@ -19,7 +19,7 @@ export const RelatedTransactionTable = ({ }: RelatedTransactionTableProps) => { if (isLoading) return ; - const templateColumns = "1fr 1fr 1fr 1fr 1fr"; + const templateColumns = "max(180px) max(180px) max(180px) 1fr max(280px)"; return ( From e29fde0daab778fa4d6ad344f4bd8994d60ea0b8 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 19 Mar 2024 17:20:26 +0700 Subject: [PATCH 07/20] refactor(components): bonded token change add link to transactions tab --- .../bonded-token-changes/VotingPowerChart.tsx | 83 ++++++++++++++----- .../components/validator-overview/index.tsx | 1 + 2 files changed, 64 insertions(+), 20 deletions(-) diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx index 69f785ca9..37ade764f 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx @@ -2,7 +2,9 @@ import { Box, Flex, Heading, Text } from "@chakra-ui/react"; import type { BigSource } from "big.js"; import type { ScriptableContext, TooltipModel } from "chart.js"; +import { useInternalNavigate } from "lib/app-provider"; import { LineChart } from "lib/components/chart/LineChart"; +import { CustomIcon } from "lib/components/icon"; import { Loading } from "lib/components/Loading"; import { ErrorFetching } from "lib/components/state"; import { useValidatorHistoricalPowers } from "lib/services/validatorService"; @@ -17,13 +19,17 @@ interface VotingPowerChartProps { validatorAddress: ValidatorAddr; singleStakingDenom: Option; assetInfos: Option; + isOverview?: boolean; } export const VotingPowerChart = ({ validatorAddress, singleStakingDenom, assetInfos, + isOverview, }: VotingPowerChartProps) => { + const navigate = useInternalNavigate(); + const { data: historicalPowers, isLoading } = useValidatorHistoricalPowers(validatorAddress); @@ -115,27 +121,64 @@ export const VotingPowerChart = ({ rounded={8} w="100%" > - - - {singleStakingDenom - ? "Current Bonded Token" - : "Current Voting Powers"} - - - {currentPrice} {currency} - - - = 0 ? "success.main" : "error.main"} + + + + {singleStakingDenom + ? "Current Bonded Token" + : "Current Voting Powers"} + + + {currentPrice} {currency} + + + = 0 ? "success.main" : "error.main"} + > + {diffInLast24Hr >= 0 + ? `+${handleFormatValue(diffInLast24Hr)}` + : `-${handleFormatValue(-diffInLast24Hr)}`} + {" "} + {currency} in last 24 hr + + + {isOverview && ( + p": { color: "secondary.light" }, + }} + onClick={() => + navigate({ + pathname: "/validators/[validatorAddress]/[tab]", + query: { + validatorAddress, + tab: "bonded-token-changes", + }, + options: { shallow: true }, + }) + } > - {diffInLast24Hr >= 0 - ? `+${handleFormatValue(diffInLast24Hr)}` - : `-${handleFormatValue(-diffInLast24Hr)}`} - {" "} - {currency} in last 24 hr - + + See all related transactions + + + + )} )} From 468a0479603d04498f79ece2d2e27bc0118d2f43 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 19 Mar 2024 17:24:09 +0700 Subject: [PATCH 08/20] feat: update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e8f6fa427..cef685c5e 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 +- [#833](https://github.com/alleslabs/celatone-frontend/pull/833) Add link to transactions page to current bonded token component - [#832](https://github.com/alleslabs/celatone-frontend/pull/832) Add bonded token changes delegation related transactions - [#831](https://github.com/alleslabs/celatone-frontend/pull/831) Update zod schema to apply with new validator delegation related txs api spec - [#828](https://github.com/alleslabs/celatone-frontend/pull/828) Add validator detail voting power overview section with data from APIs From 3b02540c3279d620d8b5d2a59f3b1bb5a9774366 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Wed, 20 Mar 2024 11:32:16 +0700 Subject: [PATCH 09/20] feat(components): fix pr comments --- .../components/bonded-token-changes/index.tsx | 35 ++-- .../components/tables/index.ts | 2 +- .../RelatedTransactionsMobileCard.tsx | 151 ++++++++---------- .../RelatedTransactionsTableRow.tsx | 108 ++++++------- .../tables/related-transactions/index.ts | 2 - ...RelatedTransactionsTable.tsx => index.tsx} | 22 ++- src/lib/services/validator.ts | 4 +- 7 files changed, 157 insertions(+), 167 deletions(-) delete mode 100644 src/lib/pages/validator-details/components/tables/related-transactions/index.ts rename src/lib/pages/validator-details/components/tables/related-transactions/{RelatedTransactionsTable.tsx => index.tsx} (62%) diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx index e5d6c62c5..1dec5750f 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx @@ -1,9 +1,6 @@ import { Box, Flex } from "@chakra-ui/react"; -import { - RelatedTransactionsMobileCard, - RelatedTransactionTable, -} from "../tables"; +import { RelatedTransactionTable } from "../tables"; import { useMobile } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; @@ -61,27 +58,19 @@ export const BondedTokenChanges = ({ assetInfos={assetInfos} /> - {isMobile ? ( - - ) : ( - <> - - - )} + {!!data?.total && data.total > 10 && ( ; - isLoading: boolean; + delegationRelatedTx: ValidatorDelegationRelatedTxsResponseItem; assetInfos: Option; } export const RelatedTransactionsMobileCard = ({ - delegationRelatedTxs, - isLoading, + delegationRelatedTx, assetInfos, -}: RelatedTransactionsMobileCardProps) => { - if (isLoading) return ; - - return ( - - {delegationRelatedTxs?.map((delegationRelatedTx) => ( - - - - - Transaction Hash - - - {delegationRelatedTx.messages.length > 1 && ( - - {delegationRelatedTx.messages.length} - - )} - - - - Sender - - - - - - - Action - - - {delegationRelatedTx.messages.length > 1 - ? `${delegationRelatedTx.messages.length} Messages` - : extractMsgType(delegationRelatedTx.messages[0].type)} - - - - - Bonded Token Changes - - {delegationRelatedTx.tokens.map((token) => ( - - ))} - - - } - bottomContent={ - - - {formatUTC(delegationRelatedTx.timestamp)} - - - {`(${dateFromNow(delegationRelatedTx.timestamp)})`} - - - } - /> - ))} - - ); -}; +}: RelatedTransactionsMobileCardProps) => ( + + + + + Transaction Hash + + + {delegationRelatedTx.messages.length > 1 && ( + + {delegationRelatedTx.messages.length} + + )} + + + + Sender + + + + + + + Action + + + {delegationRelatedTx.messages.length > 1 + ? `${delegationRelatedTx.messages.length} Messages` + : extractMsgType(delegationRelatedTx.messages[0].type)} + + + + + Bonded Token Changes + + {delegationRelatedTx.tokens.map((token) => ( + + ))} + + + } + bottomContent={ + + + {formatUTC(delegationRelatedTx.timestamp)} + + + {`(${dateFromNow(delegationRelatedTx.timestamp)})`} + + + } + /> +); diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx index 01bfa5933..0968a3454 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx @@ -18,60 +18,58 @@ export const RelatedTransactionsTableRow = ({ delegationRelatedTx, templateColumns, assetInfos, -}: RelatedTransactionsTableRowProps) => { - return ( - - - ( + + + + {delegationRelatedTx.messages.length > 1 && ( + + {delegationRelatedTx.messages.length} + + )} + + + + + + + {delegationRelatedTx.messages.length > 1 + ? `${delegationRelatedTx.messages.length} Messages` + : extractMsgType(delegationRelatedTx.messages[0].type)} + + + + {delegationRelatedTx.tokens.map((token) => ( + - {delegationRelatedTx.messages.length > 1 && ( - - {delegationRelatedTx.messages.length} - - )} - - - - - - - {delegationRelatedTx.messages.length > 1 - ? `${delegationRelatedTx.messages.length} Messages` - : extractMsgType(delegationRelatedTx.messages[0].type)} + ))} + + + + + {formatUTC(delegationRelatedTx.timestamp)} + + + {`(${dateFromNow(delegationRelatedTx.timestamp)})`} - - - {delegationRelatedTx.tokens.map((token) => ( - - ))} - - - - - {formatUTC(delegationRelatedTx.timestamp)} - - - {`(${dateFromNow(delegationRelatedTx.timestamp)})`} - - - - - ); -}; + + + +); diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/index.ts b/src/lib/pages/validator-details/components/tables/related-transactions/index.ts deleted file mode 100644 index 510db6bb2..000000000 --- a/src/lib/pages/validator-details/components/tables/related-transactions/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./RelatedTransactionsTable"; -export * from "./RelatedTransactionsMobileCard"; diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/index.tsx similarity index 62% rename from src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx rename to src/lib/pages/validator-details/components/tables/related-transactions/index.tsx index 322dc666b..4c76ae73b 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTable.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/index.tsx @@ -1,8 +1,11 @@ +import { useMobile } from "lib/app-provider"; import { Loading } from "lib/components/Loading"; -import { TableContainer } from "lib/components/table"; +import { ErrorFetching } from "lib/components/state"; +import { MobileTableContainer, TableContainer } from "lib/components/table"; import type { ValidatorDelegationRelatedTxsResponseItem } from "lib/services/validator"; import type { AssetInfos, Option } from "lib/types"; +import { RelatedTransactionsMobileCard } from "./RelatedTransactionsMobileCard"; import { RelatedTransactionsTableHeader } from "./RelatedTransactionsTableHeader"; import { RelatedTransactionsTableRow } from "./RelatedTransactionsTableRow"; @@ -13,15 +16,28 @@ interface RelatedTransactionTableProps { } export const RelatedTransactionTable = ({ - delegationRelatedTxs = [], + delegationRelatedTxs, isLoading, assetInfos, }: RelatedTransactionTableProps) => { + const isMobile = useMobile(); + if (isLoading) return ; + if (!delegationRelatedTxs) + return ; const templateColumns = "max(180px) max(180px) max(180px) 1fr max(280px)"; - return ( + return isMobile ? ( + + {delegationRelatedTxs?.map((delegationRelatedTx) => ( + + ))} + + ) : ( {delegationRelatedTxs.map((delegationRelatedTx) => ( diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts index fb014df1f..24b089269 100644 --- a/src/lib/services/validator.ts +++ b/src/lib/services/validator.ts @@ -6,10 +6,10 @@ import { CURR_THEME } from "env"; import type { Option, StakingShare, Validator, ValidatorAddr } from "lib/types"; import { BlockVote, + zBechAddr, zBig, zCoin, zUtcDate, - zValidatorAddr, zValidatorData, } from "lib/types"; import { @@ -230,7 +230,7 @@ const zValidatorDelegationRelatedTxsResponseItem = z type: z.string(), }) ), - sender: zValidatorAddr, + sender: zBechAddr, }) .transform((val) => ({ ...snakeToCamel(val), From 40bb9c49eb43df45f02aa162c146d117aac52de4 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Wed, 20 Mar 2024 11:56:44 +0700 Subject: [PATCH 10/20] feat(components): fix acceptance test ui --- .../components/bonded-token-changes/index.tsx | 10 +++++++++- .../RelatedTransactionsBondedTokenChanges.tsx | 2 +- .../RelatedTransactionsMobileCard.tsx | 4 ++++ .../RelatedTransactionsTableRow.tsx | 4 ++++ .../components/tables/related-transactions/index.tsx | 5 +++++ 5 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx index 1dec5750f..04b6abf0f 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx @@ -1,7 +1,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { RelatedTransactionTable } from "../tables"; -import { useMobile } from "lib/app-provider"; +import { useInternalNavigate, useMobile } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; import { TableTitle } from "lib/components/table"; @@ -22,6 +22,13 @@ export const BondedTokenChanges = ({ assetInfos, }: BondedTokenChangesProps) => { const isMobile = useMobile(); + const navigate = useInternalNavigate(); + const onRowSelect = (txHash: string) => + navigate({ + pathname: "/txs/[txHash]", + query: { txHash: txHash.toUpperCase() }, + replace: true, + }); const { pagesQuantity, @@ -70,6 +77,7 @@ export const BondedTokenChanges = ({ delegationRelatedTxs={data?.items} isLoading={isLoading} assetInfos={assetInfos} + onRowSelect={onRowSelect} /> {!!data?.total && data.total > 10 && ( - {formattedAmount} + {isPositiveAmount ? `+${formattedAmount}` : formattedAmount} {" "} {tokenWithValue.symbol} diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsMobileCard.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsMobileCard.tsx index 05222b403..6e31df97a 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsMobileCard.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsMobileCard.tsx @@ -11,11 +11,13 @@ import { RelatedTransactionsBondedTokenChanges } from "./RelatedTransactionsBond interface RelatedTransactionsMobileCardProps { delegationRelatedTx: ValidatorDelegationRelatedTxsResponseItem; assetInfos: Option; + onRowSelect: (txHash: string) => void; } export const RelatedTransactionsMobileCard = ({ delegationRelatedTx, assetInfos, + onRowSelect, }: RelatedTransactionsMobileCardProps) => ( ))} @@ -81,5 +84,6 @@ export const RelatedTransactionsMobileCard = ({ } + onClick={() => onRowSelect(delegationRelatedTx.txHash)} /> ); diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx index 0968a3454..521974f7a 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsTableRow.tsx @@ -11,12 +11,14 @@ import { RelatedTransactionsBondedTokenChanges } from "./RelatedTransactionsBond interface RelatedTransactionsTableRowProps { delegationRelatedTx: ValidatorDelegationRelatedTxsResponseItem; templateColumns: string; + onRowSelect: (txHash: string) => void; assetInfos: Option; } export const RelatedTransactionsTableRow = ({ delegationRelatedTx, templateColumns, + onRowSelect, assetInfos, }: RelatedTransactionsTableRowProps) => ( onRowSelect(delegationRelatedTx.txHash)} > ))} diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/index.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/index.tsx index 4c76ae73b..ee30eddb9 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/index.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/index.tsx @@ -13,12 +13,14 @@ interface RelatedTransactionTableProps { delegationRelatedTxs: Option; isLoading: boolean; assetInfos: Option; + onRowSelect: (txHash: string) => void; } export const RelatedTransactionTable = ({ delegationRelatedTxs, isLoading, assetInfos, + onRowSelect, }: RelatedTransactionTableProps) => { const isMobile = useMobile(); @@ -32,8 +34,10 @@ export const RelatedTransactionTable = ({ {delegationRelatedTxs?.map((delegationRelatedTx) => ( ))} @@ -46,6 +50,7 @@ export const RelatedTransactionTable = ({ templateColumns={templateColumns} delegationRelatedTx={delegationRelatedTx} assetInfos={assetInfos} + onRowSelect={onRowSelect} /> ))} From c8c2ada71d57123759ca58365a33e21bbd58ecbc Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Wed, 20 Mar 2024 13:43:47 +0700 Subject: [PATCH 11/20] feat(components): change button to ghost variant --- .../bonded-token-changes/VotingPowerChart.tsx | 52 +++++++------------ 1 file changed, 20 insertions(+), 32 deletions(-) diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx index 37ade764f..17b360740 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Heading, Text } from "@chakra-ui/react"; +import { Box, Button, Flex, Heading, Text } from "@chakra-ui/react"; import type { BigSource } from "big.js"; import type { ScriptableContext, TooltipModel } from "chart.js"; @@ -145,39 +145,27 @@ export const VotingPowerChart = ({ {isOverview && ( - p": { color: "secondary.light" }, - }} - onClick={() => - navigate({ - pathname: "/validators/[validatorAddress]/[tab]", - query: { - validatorAddress, - tab: "bonded-token-changes", - }, - options: { shallow: true }, - }) - } - > - + + )} From 184e8f0b0c3335006bbb745b1327f0455a4d4788 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Wed, 20 Mar 2024 14:06:27 +0700 Subject: [PATCH 12/20] feat(components): use button size md instead of sm --- .../components/bonded-token-changes/VotingPowerChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx index 17b360740..dc571cbbe 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx @@ -148,8 +148,8 @@ export const VotingPowerChart = ({ - + )} From 492ee235cb3d891b12269155c080842499a4b147 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Thu, 21 Mar 2024 11:00:29 +0700 Subject: [PATCH 15/20] feat(components): fix pr comments --- .../components/bonded-token-changes/index.tsx | 1 - .../RelatedTransactionsBondedTokenChanges.tsx | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx index 04b6abf0f..a9af0d239 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx @@ -27,7 +27,6 @@ export const BondedTokenChanges = ({ navigate({ pathname: "/txs/[txHash]", query: { txHash: txHash.toUpperCase() }, - replace: true, }); const { diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx index 1e147743d..a723f4dc4 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx @@ -9,6 +9,7 @@ import { coinToTokenWithValue, formatPrice, formatUTokenWithPrecision, + getTokenLabel, } from "lib/utils"; interface RelatedTransactionsBondedTokenChangesProps { @@ -43,7 +44,7 @@ export const RelatedTransactionsBondedTokenChanges = ({ > {formattedAmount} {" "} - {token.symbol} + {` ${getTokenLabel(token.denom, token.symbol)}`} {token.value From 32231dcb25e42ec30edc1c938e1a00cabb604283 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Thu, 21 Mar 2024 11:05:25 +0700 Subject: [PATCH 16/20] feat(components): fix pr comments --- .../components/bonded-token-changes/VotingPowerChart.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx index a4c0db6db..ab4beeb3c 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx @@ -2,6 +2,7 @@ import { Box, Button, Flex, Heading, Text } from "@chakra-ui/react"; import type { BigSource } from "big.js"; import type { ScriptableContext, TooltipModel } from "chart.js"; +import { TabIndex } from "../../types"; import { useInternalNavigate } from "lib/app-provider"; import { LineChart } from "lib/components/chart/LineChart"; import { CustomIcon } from "lib/components/icon"; @@ -155,7 +156,7 @@ export const VotingPowerChart = ({ pathname: "/validators/[validatorAddress]/[tab]", query: { validatorAddress, - tab: "bonded-token-changes", + tab: TabIndex.BondedTokenChanges, }, options: { shallow: true }, }) From 715999c00edaf2bf99605209b0d3be74482456f2 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Thu, 21 Mar 2024 11:06:49 +0700 Subject: [PATCH 17/20] feat(components): fix pr comments --- .../RelatedTransactionsBondedTokenChanges.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx index a723f4dc4..cfb165279 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx @@ -43,7 +43,7 @@ export const RelatedTransactionsBondedTokenChanges = ({ color={isPositiveAmount ? "success.main" : "error.main"} > {formattedAmount} - {" "} + {` ${getTokenLabel(token.denom, token.symbol)}`} From 4a680e3fe6c49f7c9cf3630cd1e881951a08efb6 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Thu, 21 Mar 2024 11:11:54 +0700 Subject: [PATCH 18/20] refactor(utils): totoken function test case --- src/lib/utils/formatter/token.test.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts index f28f53228..e941a9cac 100644 --- a/src/lib/utils/formatter/token.test.ts +++ b/src/lib/utils/formatter/token.test.ts @@ -155,9 +155,6 @@ describe("toToken", () => { test("NaN", () => { expect(toToken(NaN as U>, 6)).toEqual(big(0) as Token); }); - test("negative number", () => { - expect(toToken(-1 as U>, 6)).toEqual(big(0) as Token); - }); }); test("more than 1", () => { expect(toToken(12345678 as U>, 6)).toEqual( From b1b2da4d5610a2a5efef310e93f94af259eb1a3f Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Thu, 21 Mar 2024 12:41:53 +0700 Subject: [PATCH 19/20] feat(components): fix coin icon layout --- .../RelatedTransactionsBondedTokenChanges.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx index cfb165279..c3e40b0d7 100644 --- a/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx +++ b/src/lib/pages/validator-details/components/tables/related-transactions/RelatedTransactionsBondedTokenChanges.tsx @@ -36,16 +36,20 @@ export const RelatedTransactionsBondedTokenChanges = ({ alignItems="center" > - + {formattedAmount} - {` ${getTokenLabel(token.denom, token.symbol)}`} - + {getTokenLabel(token.denom, token.symbol)} + + {token.value ? `(${formatPrice(token.value.abs() as USD)})` @@ -53,6 +57,7 @@ export const RelatedTransactionsBondedTokenChanges = ({ From baa08bcb2f5d808adff71e5ed1e80c017f3a6391 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Thu, 21 Mar 2024 16:13:17 +0700 Subject: [PATCH 20/20] feat(components): fix related transaction table props --- .../components/bonded-token-changes/index.tsx | 9 +-------- .../components/tables/related-transactions/index.tsx | 10 +++++++--- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx index a9af0d239..1dec5750f 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/index.tsx @@ -1,7 +1,7 @@ import { Box, Flex } from "@chakra-ui/react"; import { RelatedTransactionTable } from "../tables"; -import { useInternalNavigate, useMobile } from "lib/app-provider"; +import { useMobile } from "lib/app-provider"; import { Pagination } from "lib/components/pagination"; import { usePaginator } from "lib/components/pagination/usePaginator"; import { TableTitle } from "lib/components/table"; @@ -22,12 +22,6 @@ export const BondedTokenChanges = ({ assetInfos, }: BondedTokenChangesProps) => { const isMobile = useMobile(); - const navigate = useInternalNavigate(); - const onRowSelect = (txHash: string) => - navigate({ - pathname: "/txs/[txHash]", - query: { txHash: txHash.toUpperCase() }, - }); const { pagesQuantity, @@ -76,7 +70,6 @@ export const BondedTokenChanges = ({ delegationRelatedTxs={data?.items} isLoading={isLoading} assetInfos={assetInfos} - onRowSelect={onRowSelect} /> {!!data?.total && data.total > 10 && ( ; isLoading: boolean; assetInfos: Option; - onRowSelect: (txHash: string) => void; } export const RelatedTransactionTable = ({ delegationRelatedTxs, isLoading, assetInfos, - onRowSelect, }: RelatedTransactionTableProps) => { const isMobile = useMobile(); + const navigate = useInternalNavigate(); + const onRowSelect = (txHash: string) => + navigate({ + pathname: "/txs/[txHash]", + query: { txHash: txHash.toUpperCase() }, + }); if (isLoading) return ; if (!delegationRelatedTxs)