Feat: Add validators tab to account address page

.github/workflows/nova-build-temp.yaml

@@ -6,7 +6,7 @@ on:
       TARGET_COMMIT:
         description: "Target Commit Hash for the SDK"
         required: false
-        default: "fc9f0f56bb5cfc146993e53aa9656ded220734e1"
+        default: "aa1b1de58731dbbf9dd0f5e2960fd11b0056b633"
       environment:
         type: choice
         description: "Select the environment to deploy to"

api/src/models/api/nova/IAccountValidatorDetailsRequest.ts

@@ -0,0 +1,11 @@
+export interface IAccountValidatorDetailsRequest {
+    /**
+     * The network to search on.
+     */
+    network: string;
+
+    /**
+     * The account id to get the validator details for.
+     */
+    accountId: string;
+}

api/src/models/api/nova/IAccountValidatorDetailsResponse.ts

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { ValidatorResponse } from "@iota/sdk-nova";
+import { IResponse } from "./IResponse";
+
+export interface IAccountValidatorDetailsResponse extends IResponse {
+    /**
+     * The account validator response.
+     */
+    validatorDetails?: ValidatorResponse;
+}

api/src/routes.ts

@@ -260,6 +260,12 @@ export const routes: IRoute[] = [
         folder: "nova/account/congestion",
         func: "get",
     },
+    {
+        path: "/nova/account/validator/:network/:accountId",
+        method: "get",
+        folder: "nova/account/validator",
+        func: "get",
+    },
     { path: "/nova/block/:network/:blockId", method: "get", folder: "nova/block", func: "get" },
     { path: "/nova/block/metadata/:network/:blockId", method: "get", folder: "nova/block/metadata", func: "get" },
     { path: "/nova/slot/:network/:slotIndex", method: "get", folder: "nova/slot", func: "get" },

api/src/routes/nova/account/validator/get.ts

@@ -0,0 +1,30 @@
+import { ServiceFactory } from "../../../../factories/serviceFactory";
+import { IAccountValidatorDetailsRequest } from "../../../../models/api/nova/IAccountValidatorDetailsRequest";
+import { IAccountValidatorDetailsResponse } from "../../../../models/api/nova/IAccountValidatorDetailsResponse";
+import { IConfiguration } from "../../../../models/configuration/IConfiguration";
+import { NOVA } from "../../../../models/db/protocolVersion";
+import { NetworkService } from "../../../../services/networkService";
+import { NovaApiService } from "../../../../services/nova/novaApiService";
+import { ValidationHelper } from "../../../../utils/validationHelper";
+
+/**
+ * Get validator details for Account address
+ * @param config The configuration.
+ * @param request The request.
+ * @returns The response.
+ */
+export async function get(config: IConfiguration, request: IAccountValidatorDetailsRequest): Promise<IAccountValidatorDetailsResponse> {
+    const networkService = ServiceFactory.get<NetworkService>("network");
+    const networks = networkService.networkNames();
+    ValidationHelper.oneOf(request.network, networks, "network");
+    ValidationHelper.string(request.accountId, "accountId");
+
+    const networkConfig = networkService.get(request.network);
+
+    if (networkConfig.protocolVersion !== NOVA) {
+        return {};
+    }
+
+    const novaApiService = ServiceFactory.get<NovaApiService>(`api-service-${networkConfig.network}`);
+    return novaApiService.getAccountValidatorDetails(request.accountId);
+}

api/src/services/nova/novaApiService.ts

@@ -7,6 +7,7 @@ import logger from "../../logger";
 import { IFoundriesResponse } from "../../models/api/nova/foundry/IFoundriesResponse";
 import { IFoundryResponse } from "../../models/api/nova/foundry/IFoundryResponse";
 import { IAccountDetailsResponse } from "../../models/api/nova/IAccountDetailsResponse";
+import { IAccountValidatorDetailsResponse } from "../../models/api/nova/IAccountValidatorDetailsResponse";
 import { IAddressDetailsResponse } from "../../models/api/nova/IAddressDetailsResponse";
 import { IAnchorDetailsResponse } from "../../models/api/nova/IAnchorDetailsResponse";
 import { IBlockDetailsResponse } from "../../models/api/nova/IBlockDetailsResponse";
@@ -322,6 +323,25 @@ export class NovaApiService {
         }
     }
 
+    /**
+     * Get validator details for Account
+     * @param accountId The account id to get the validator details for.
+     * @returns The Congestion.
+     */
+    public async getAccountValidatorDetails(accountId: string): Promise<IAccountValidatorDetailsResponse | undefined> {
+        try {
+            const response = await this.client.getValidator(accountId);
+
+            if (response) {
+                return {
+                    validatorDetails: response,
+                };
+            }
+        } catch {
+            return { message: "Validator details not found" };
+        }
+    }
+
     /**
      * Get the output mana rewards.
      * @param outputId The outputId to get the rewards for.

client/src/app/components/nova/address/section/AddressPageTabbedSections.tsx

@@ -3,6 +3,7 @@ import associatedOuputsMessage from "~assets/modals/stardust/address/associated-
 import foundriesMessage from "~assets/modals/stardust/alias/foundries.json";
 import stateMessage from "~assets/modals/stardust/alias/state.json";
 import bicMessage from "~assets/modals/nova/account/bic.json";
+import validatorMessage from "~assets/modals/nova/account/validator.json";
 import nftMetadataMessage from "~assets/modals/stardust/nft/metadata.json";
 import addressNftsMessage from "~assets/modals/stardust/address/nfts-in-wallet.json";
 import TabbedSection from "../../../hoc/TabbedSection";
@@ -21,6 +22,7 @@ import AnchorStateSection from "./anchor/AnchorStateSection";
 import NftSection from "~/app/components/nova/address/section/nft/NftSection";
 import NftMetadataSection from "~/app/components/nova/address/section/nft/NftMetadataSection";
 import { TransactionsHelper } from "~/helpers/nova/transactionsHelper";
+import AccountValidatorSection from "./account/AccountValidatorSection";
 
 enum DEFAULT_TABS {
     AssocOutputs = "Outputs",
@@ -31,6 +33,7 @@ enum DEFAULT_TABS {
 enum ACCOUNT_TABS {
     BlockIssuance = "Block Issuance",
     Foundries = "Foundries",
+    Validation = "Validation",
 }
 
 enum ANCHOR_TABS {
@@ -74,7 +77,9 @@ const buildAccountAddressTabsOptions = (
     isBlockIssuer: boolean,
     isCongestionLoading: boolean,
     foundriesCount: number,
+    hasStakingFeature: boolean,
     isAccountFoundriesLoading: boolean,
+    isValidatorDetailsLoading: boolean,
 ) => ({
     [ACCOUNT_TABS.Foundries]: {
         disabled: foundriesCount === 0,
@@ -88,6 +93,12 @@ const buildAccountAddressTabsOptions = (
         isLoading: isCongestionLoading,
         infoContent: bicMessage,
     },
+    [ACCOUNT_TABS.Validation]: {
+        disabled: !hasStakingFeature,
+        hidden: !hasStakingFeature,
+        isLoading: isValidatorDetailsLoading,
+        infoContent: validatorMessage,
+    },
 });
 
 const buildAnchorAddressTabsOptions = (isAnchorStateTabDisabled: boolean, isAnchorDetailsLoading: boolean) => ({
@@ -151,6 +162,10 @@ export const AddressPageTabbedSections: React.FC<IAddressPageTabbedSectionsProps
                       key={`account-foundry-${addressBech32}`}
                       foundries={(addressState as IAccountAddressState).foundries}
                   />,
+                  <AccountValidatorSection
+                      key={`account-validator-${addressBech32}`}
+                      validatorDetails={(addressState as IAccountAddressState).validatorDetails}
+                  />,
               ]
             : null;
 
@@ -186,7 +201,9 @@ export const AddressPageTabbedSections: React.FC<IAddressPageTabbedSectionsProps
                     accountAddressState.blockIssuerFeature !== null,
                     accountAddressState.isCongestionLoading,
                     accountAddressState.accountOutput?.foundryCounter ?? 0,
+                    accountAddressState.stakingFeature !== null,
                     accountAddressState.isFoundriesLoading,
+                    accountAddressState.isValidatorDetailsLoading,
                 ),
             };
             tabbedSections = [...defaultSections, ...(accountAddressSections ?? [])];

client/src/app/components/nova/address/section/account/AccountValidatorSection.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ValidatorResponse } from "@iota/sdk-wasm-nova/web";
+
+interface AccountValidatorSectionProps {
+    readonly validatorDetails: ValidatorResponse | null;
+}
+
+const AccountValidatorSection: React.FC<AccountValidatorSectionProps> = ({ validatorDetails }) => {
+    if (!validatorDetails) {
+        return null;
+    }
+
+    const delegatedStake = BigInt(validatorDetails.poolStake) - BigInt(validatorDetails.validatorStake);
+
+    return (
+        <div className="section transaction--section">
+            <div className="card controlled-foundry--card">
+                <div className="field">
+                    <div className="card--label margin-b-t">Active</div>
+                    <div className="card--value">{validatorDetails.active ? "Yes" : "No"}</div>
+                </div>
+                <div className="field">
+                    <div className="card--label margin-b-t">Staking End Epoch</div>
+                    <div className="card--value">{validatorDetails.stakingEndEpoch}</div>
+                </div>
+                <div className="field">
+                    <div className="card--label margin-b-t">Pool Stake</div>
+                    <div className="card--value">{String(validatorDetails.poolStake)}</div>
+                </div>
+                <div className="field">
+                    <div className="card--label margin-b-t">Validator Stake</div>
+                    <div className="card--value">{String(validatorDetails.validatorStake)}</div>
+                </div>
+                <div className="field">
+                    <div className="card--label margin-b-t">Delegated Stake</div>
+                    <div className="card--value">{String(delegatedStake)}</div>
+                </div>
+                <div className="field">
+                    <div className="card--label margin-b-t">Fixed Cost</div>
+                    <div className="card--value">{Number(validatorDetails?.fixedCost)}</div>
+                </div>
+                <div className="field">
+                    <div className="card--label margin-b-t">Latest Supported Protocol Version</div>
+                    <div className="card--value">{validatorDetails?.latestSupportedProtocolVersion}</div>
+                </div>
+                <div className="field">
+                    <div className="card--label margin-b-t">Latest Supported Protocol Hash</div>
+                    <div className="card--value">{validatorDetails?.latestSupportedProtocolHash}</div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AccountValidatorSection;

client/src/assets/modals/nova/account/validator.json

@@ -0,0 +1,11 @@
+{
+    "title": "Validator",
+    "description": "<p>Validators are special nodes that issue validation blocks.</p>",
+    "links": [
+        {
+            "label": "Read more",
+            "href": "https://wiki.iota.org/learn/protocols/iota2.0/core-concepts/validators",
+            "isExternal": true
+        }
+    ]
+}

client/src/helpers/nova/hooks/useAccountAddressState.ts

@@ -6,6 +6,8 @@ import {
     CongestionResponse,
     FeatureType,
     OutputResponse,
+    StakingFeature,
+    ValidatorResponse,
 } from "@iota/sdk-wasm-nova/web";
 import { IAddressDetails } from "~/models/api/nova/IAddressDetails";
 import { useAccountDetails } from "./useAccountDetails";
@@ -18,13 +20,16 @@ import { useAddressBasicOutputs } from "~/helpers/nova/hooks/useAddressBasicOutp
 import { useAccountControlledFoundries } from "./useAccountControlledFoundries";
 import { useAccountCongestion } from "./useAccountCongestion";
 import { useAddressNftOutputs } from "~/helpers/nova/hooks/useAddressNftOutputs";
+import { useAccountValidatorDetails } from "./useAccountValidatorDetails";
 
 export interface IAccountAddressState {
     addressDetails: IAddressDetails | null;
     accountOutput: AccountOutput | null;
     totalBalance: number | null;
     availableBalance: number | null;
     blockIssuerFeature: BlockIssuerFeature | null;
+    stakingFeature: StakingFeature | null;
+    validatorDetails: ValidatorResponse | null;
     addressBasicOutputs: OutputResponse[] | null;
     addressNftOutputs: OutputResponse[] | null;
     foundries: string[] | null;
@@ -35,6 +40,7 @@ export interface IAccountAddressState {
     isNftOutputsLoading: boolean;
     isFoundriesLoading: boolean;
     isCongestionLoading: boolean;
+    isValidatorDetailsLoading: boolean;
 }
 
 const initialState = {
@@ -43,6 +49,8 @@ const initialState = {
     totalBalance: null,
     availableBalance: null,
     blockIssuerFeature: null,
+    stakingFeature: null,
+    validatorDetails: null,
     addressBasicOutputs: null,
     addressNftOutputs: null,
     foundries: null,
@@ -53,6 +61,7 @@ const initialState = {
     isNftOutputsLoading: false,
     isFoundriesLoading: false,
     isCongestionLoading: false,
+    isValidatorDetailsLoading: false,
 };
 
 /**
@@ -72,11 +81,16 @@ export const useAccountAddressState = (address: AccountAddress): [IAccountAddres
     );
 
     const { accountOutput, isLoading: isAccountDetailsLoading } = useAccountDetails(network, address.accountId);
+
     const { totalBalance, availableBalance } = useAddressBalance(network, state.addressDetails, accountOutput);
     const [addressBasicOutputs, isBasicOutputsLoading] = useAddressBasicOutputs(network, state.addressDetails?.bech32 ?? null);
     const [addressNftOutputs, isNftOutputsLoading] = useAddressNftOutputs(network, state.addressDetails?.bech32 ?? null);
     const [foundries, isFoundriesLoading] = useAccountControlledFoundries(network, state.addressDetails);
     const { congestion, isLoading: isCongestionLoading } = useAccountCongestion(network, state.addressDetails?.hex ?? null);
+    const { validatorDetails, isLoading: isValidatorDetailsLoading } = useAccountValidatorDetails(
+        network,
+        state.addressDetails?.hex ?? null,
+    );
 
     useEffect(() => {
         const locationState = location.state as IAddressPageLocationProps;
@@ -98,23 +112,36 @@ export const useAccountAddressState = (address: AccountAddress): [IAccountAddres
             availableBalance,
             foundries,
             congestion,
+            validatorDetails,
             addressBasicOutputs,
             addressNftOutputs,
             isBasicOutputsLoading,
             isNftOutputsLoading,
             isFoundriesLoading,
             isCongestionLoading,
+            isValidatorDetailsLoading,
         };
 
-        if (accountOutput && !state.blockIssuerFeature) {
-            const blockIssuerFeature = accountOutput?.features?.find(
-                (feature) => feature.type === FeatureType.BlockIssuer,
-            ) as BlockIssuerFeature;
-            if (blockIssuerFeature) {
-                updatedState = {
-                    ...updatedState,
-                    blockIssuerFeature,
-                };
+        if (accountOutput) {
+            if (!state.blockIssuerFeature) {
+                const blockIssuerFeature = accountOutput?.features?.find(
+                    (feature) => feature.type === FeatureType.BlockIssuer,
+                ) as BlockIssuerFeature;
+                if (blockIssuerFeature) {
+                    updatedState = {
+                        ...updatedState,
+                        blockIssuerFeature,
+                    };
+                }
+            }
+            if (!state.stakingFeature) {
+                const stakingFeature = accountOutput?.features?.find((feature) => feature.type === FeatureType.Staking) as StakingFeature;
+                if (stakingFeature) {
+                    updatedState = {
+                        ...updatedState,
+                        stakingFeature,
+                    };
+                }
             }
         }
 
@@ -126,10 +153,12 @@ export const useAccountAddressState = (address: AccountAddress): [IAccountAddres
         addressBasicOutputs,
         addressNftOutputs,
         congestion,
+        validatorDetails,
         isAccountDetailsLoading,
         isBasicOutputsLoading,
         isNftOutputsLoading,
         isCongestionLoading,
+        isValidatorDetailsLoading,
     ]);
 
     return [state, setState];