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 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..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 @@ -1,8 +1,11 @@ -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"; +import { TabIndex } from "../../types"; +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 +20,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 +122,50 @@ 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 && ( + + )} )}