[CFE-37] Feature: current bonded token link

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

src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx

@@ -1,8 +1,10 @@
-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 { 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<string>;
   assetInfos: Option<AssetInfos>;
+  isOverview?: boolean;
 }
 
 export const VotingPowerChart = ({
   validatorAddress,
   singleStakingDenom,
   assetInfos,
+  isOverview,
 }: VotingPowerChartProps) => {
+  const navigate = useInternalNavigate();
+
   const { data: historicalPowers, isLoading } =
     useValidatorHistoricalPowers(validatorAddress);
 
@@ -115,27 +121,52 @@ export const VotingPowerChart = ({
       rounded={8}
       w="100%"
     >
-      <Flex gap={2} direction="column" w={250} minW={250}>
-        <Heading variant="h6">
-          {singleStakingDenom
-            ? "Current Bonded Token"
-            : "Current Voting Powers"}
-        </Heading>
-        <Heading variant="h5" fontWeight={600}>
-          {currentPrice} {currency}
-        </Heading>
-        <Text variant="body1">
-          <Text
-            as="span"
-            fontWeight={700}
-            color={diffInLast24Hr >= 0 ? "success.main" : "error.main"}
-          >
-            {diffInLast24Hr >= 0
-              ? `+${handleFormatValue(diffInLast24Hr)}`
-              : `-${handleFormatValue(-diffInLast24Hr)}`}
-          </Text>{" "}
-          {currency} in last 24 hr
-        </Text>
+      <Flex gap={6} direction="column" w={250} minW={250}>
+        <Flex gap={2} direction="column">
+          <Heading variant="h6">
+            {singleStakingDenom
+              ? "Current Bonded Token"
+              : "Current Voting Powers"}
+          </Heading>
+          <Heading variant="h5" fontWeight={600}>
+            {currentPrice} {currency}
+          </Heading>
+          <Text variant="body1">
+            <Text
+              as="span"
+              fontWeight={700}
+              color={diffInLast24Hr >= 0 ? "success.main" : "error.main"}
+            >
+              {diffInLast24Hr >= 0
+                ? `+${handleFormatValue(diffInLast24Hr)}`
+                : `-${handleFormatValue(-diffInLast24Hr)}`}
+            </Text>{" "}
+            {currency} in last 24 hr
+          </Text>
+        </Flex>
+        {isOverview && (
+          <Box>
+            <Button
+              variant="ghost-secondary"
+              p="unset"
+              size="md"
+              pl={2}
+              onClick={() =>
+                navigate({
+                  pathname: "/validators/[validatorAddress]/[tab]",
+                  query: {
+                    validatorAddress,
+                    tab: "bonded-token-changes",
+                  },
+                  options: { shallow: true },
+                })
+              }
+            >
+              See all related transactions
+              <CustomIcon name="chevron-right" boxSize={3} />
+            </Button>
+          </Box>
+        )}
       </Flex>
       <Box w="100%" h="272px" id="voting-power-chart-container">
         <LineChart

src/lib/pages/validator-details/components/validator-overview/index.tsx

@@ -73,6 +73,7 @@ export const ValidatorOverview = ({
             validatorAddress={validatorAddress}
             singleStakingDenom={singleStakingDenom}
             assetInfos={assetInfos}
+            isOverview
           />
         </>
       )}