New fields on validator page (#214)

src/components/validators/ValidatorInfoTable.tsx

@@ -5,6 +5,9 @@ import { Currency } from "../Currency";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
 import { rawAmountToDecimal } from "../../utils/number";
 import { useAppStats } from "../../contexts";
+import { Resource } from "../../model/resource";
+import { Validator } from "../../model/validator";
+import { AccountAddress } from "../AccountAddress";
 
 const addressItem = css`
   overflow: hidden;
@@ -15,33 +18,35 @@ const addressItem = css`
 export type ValidatorInfoTableProps = {
 	account: string;
 	balance: any;
+	info: Resource<Validator>;
 };
 
 const ValidatorInfoTableAttribute = InfoTableAttribute<any>;
 
 export const ValidatorInfoTable = (props: ValidatorInfoTableProps) => {
-	const { account, balance } = props;
+	const { account, balance, info } = props;
 
-	const { currency } = NETWORK_CONFIG;
+	const { currency, prefix } = NETWORK_CONFIG;
 
 	const {
 		state: { tokenLoading, tokenStats },
 	} = useAppStats();
 	const dominance =
-	tokenLoading || tokenStats === undefined || tokenStats.delegatedSupply === 0
-		? 0
-		: (
-			(rawAmountToDecimal(balance.data).toNumber() /
-			tokenStats.delegatedSupply) * 100
-		).toFixed(2);
+		tokenLoading || tokenStats === undefined || tokenStats.delegatedSupply === 0
+			? 0
+			: (
+				(rawAmountToDecimal(balance.data).toNumber() /
+				tokenStats.delegatedSupply) *
+			100
+			).toFixed(2);
 
 	return (
 		<InfoTable
 			data={props}
-			loading={balance.loading}
-			notFound={balance.notFound}
+			loading={balance.loading || info.loading}
+			notFound={balance.notFound || info.notFound}
 			notFoundMessage="No validator found"
-			error={balance.error}
+			error={balance.error || info.error}
 		>
 			<ValidatorInfoTableAttribute
 				label="Hotkey"
@@ -63,6 +68,12 @@ export const ValidatorInfoTable = (props: ValidatorInfoTableProps) => {
 				label="Dominance"
 				render={() => <div>{dominance}%</div>}
 			/>
+			<ValidatorInfoTableAttribute
+				label="Owner"
+				render={() => (
+					<AccountAddress address={info.data?.owner || ""} prefix={prefix} link />
+				)}
+			/>
 		</InfoTable>
 	);
 };

src/components/validators/ValidatorPortfolio.tsx

@@ -1,14 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { formatNumber, rawAmountToDecimal } from "../../utils/number";
-import { useColdKey } from "../../hooks/useColdKey";
-import { useValidatorStaked } from "../../hooks/useValidatorStaked";
 import { useValidatorBalance } from "../../hooks/useValidatorBalance";
 import { StatItem } from "../network/StatItem";
 import { DonutChart } from "../DonutChart";
 import Loading from "../Loading";
 import { useState, useEffect } from "react";
 import { countNominators } from "../../services/delegateService";
+import { Resource } from "../../model/resource";
+import { Validator } from "../../model/validator";
 
 const chartContainer = css`
   display: flex;
@@ -34,15 +34,15 @@ const spinnerContainer = css`
 
 export type ValidatorPortfolioProps = {
 	hotkey: string;
+	info: Resource<Validator>;
 };
 
 export const ValidatorPortfolio = (props: ValidatorPortfolioProps) => {
-	const { hotkey } = props;
+	const { hotkey, info } = props;
 
 	const balance = useValidatorBalance({ address: { equalTo: hotkey } });
-	const coldKey = useColdKey(hotkey);
-	const validatorStaked = useValidatorStaked(hotkey, coldKey);
-	const loading = balance.loading || validatorStaked === undefined;
+	const loading = balance.loading || info.loading;
+	const validatorStaked = info.data?.validatorStake.toString();
 	const validatorStakedFormatted = loading
 		? 0
 		: formatNumber(rawAmountToDecimal(validatorStaked), { decimalPlaces: 2 });

src/hooks/useValidator.ts

@@ -0,0 +1,10 @@
+import { FetchOptions } from "../model/fetchOptions";
+import { ValidatorsFilter, getValidator } from "../services/validatorService";
+
+import { useResource } from "./useResource";
+
+export function useValidator(
+	filter: ValidatorsFilter,
+	options?: FetchOptions) {
+	return useResource(getValidator, [filter], options);
+}

src/model/validator.ts

@@ -10,6 +10,8 @@ export type Validator = {
 	rank: bigint;
 	amountChange: bigint;
 	nominatorChange: bigint;
+	owner: string;
+	validatorStake: bigint;
 	name?: string;
 };
 

src/screens/validators.tsx

@@ -24,6 +24,7 @@ import { ValidatorPortfolio } from "../components/validators/ValidatorPortfolio"
 import { ValidatorStakeHistoryChart } from "../components/validators/ValidatorStakeHistoryChart";
 import { useValidatorStakeHistory } from "../hooks/useValidatorHistory";
 import { useVerifiedDelegates } from "../hooks/useVerifiedDelegates";
+import { useValidator } from "../hooks/useValidator";
 
 const validatorHeader = (theme: Theme) => css`
   display: flex;
@@ -100,6 +101,8 @@ export type ValidatorPageParams = {
 export const ValidatorPage = () => {
 	const { address } = useParams() as ValidatorPageParams;
 
+	const validator = useValidator({ address: { equalTo: address } });
+
 	const verifiedDelegates = useVerifiedDelegates();
 
 	const info = verifiedDelegates[address];
@@ -192,7 +195,7 @@ export const ValidatorPage = () => {
 					{info?.description && (
 						<div css={validatorDescription}>{info?.description}</div>
 					)}
-					<ValidatorInfoTable account={address} balance={balance} />
+					<ValidatorInfoTable account={address} balance={balance} info={validator} />
 					<div css={stakeButton}>
 						<ButtonLink
 							to={`https://delegate.taostats.io/staking?hkey=${address}`}
@@ -206,7 +209,7 @@ export const ValidatorPage = () => {
 					</div>
 				</Card>
 				<Card css={portfolioStyle} data-test="account-portfolio">
-					<ValidatorPortfolio hotkey={address} />
+					<ValidatorPortfolio hotkey={address} info={validator} />
 				</Card>
 			</CardRow>
 			<Card data-test="account-historical-items">

src/services/validatorService.ts

@@ -22,6 +22,26 @@ export type ValidatorsOrder =
 	| "NOMINATORS_ASC"
 	| "NOMINATORS_DESC";
 
+export async function getValidator(filter: ValidatorsFilter) {
+	const response = await fetchIndexer<{ validators: ResponseItems<Validator> }>(
+		`query ($filter: ValidatorFilter) {
+			validators(first: 1, offset: 0, filter: $filter, orderBy: ID_DESC) {
+				nodes {
+					id
+					owner
+					validatorStake
+				}
+			}
+		}`,
+		{
+			filter,
+		}
+	);
+
+	const data = response.validators?.nodes[0] && transformValidator(response.validators.nodes[0]);
+	return data;
+}
+
 export async function getValidators(
 	order: ValidatorsOrder = "AMOUNT_DESC",
 	pagination: PaginationOptions
@@ -113,3 +133,7 @@ export async function getValidatorStakeHistory(
 		data: response.validators?.nodes,
 	};
 }
+
+const transformValidator = (validator: Validator): Validator => {
+	return validator;
+};