fix: add validator image resolver hook (add keybase as a fallback opt…

CHANGELOG.md

@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#402](https://github.com/alleslabs/celatone-frontend/pull/402) Add validator image resolver hook (add keybase as a fallback option)
 - [#386](https://github.com/alleslabs/celatone-frontend/pull/386) Handle uppercase address
 - [#382](https://github.com/alleslabs/celatone-frontend/pull/382) Add pool manager v15 msgs to tx details
 - [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page

src/lib/components/ValidatorBadge.tsx

@@ -1,11 +1,9 @@
 import type { ImageProps } from "@chakra-ui/react";
-import { Flex, Image, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
+import { Spinner, Flex, Image, Text } from "@chakra-ui/react";
 
-import { CURR_THEME, getChainApiPath } from "env";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { useValidatorImage } from "lib/services/validatorService";
 import type { ValidatorInfo } from "lib/types";
-import { removeSpecialChars } from "lib/utils";
 
 interface ValidatorBadgeProps {
   validator: ValidatorInfo | null;
@@ -34,25 +32,22 @@ export const ValidatorBadge = ({
   validator,
   badgeSize = 10,
 }: ValidatorBadgeProps) => {
-  const { currentChainName } = useWallet();
+  const { data: valImgSrc, isLoading } = useValidatorImage(validator);
+
   return (
     <Flex alignItems="center" gap={2}>
       {validator ? (
         <>
-          <Image
-            boxSize={badgeSize}
-            src={`https://raw.githubusercontent.com/cosmostation/chainlist/master/chain/${getChainApiPath(
-              currentChainName
-            )}/moniker/${validator.validatorAddress}.png`}
-            alt={validator.moniker}
-            fallbackSrc={`https://ui-avatars.com/api/?name=${removeSpecialChars(
-              validator.moniker ?? ""
-            )}&background=${CURR_THEME.colors.secondary.main.replace(
-              "#",
-              ""
-            )}&color=fff`}
-            borderRadius="50%"
-          />
+          {isLoading ? (
+            <Spinner boxSize={badgeSize} />
+          ) : (
+            <Image
+              boxSize={badgeSize}
+              src={valImgSrc}
+              alt={validator.moniker}
+              borderRadius="50%"
+            />
+          )}
           <ExplorerLink
             value={validator.moniker ?? validator.validatorAddress}
             copyValue={validator.validatorAddress}

src/lib/gql/gql.ts

@@ -7,9 +7,9 @@ const documents = {
     types.GetAccountIdByAddressQueryDocumentDocument,
   "\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n":
     types.GetBlockTimestampByHeightQueryDocument,
-  "\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n      }\n    }\n  }\n":
+  "\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n":
     types.GetBlockListQueryDocument,
-  "\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n      }\n    }\n  }\n":
+  "\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n":
     types.GetBlockDetailsByHeightDocument,
   "\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n":
     types.GetLatestBlockInfoDocument,
@@ -86,11 +86,11 @@ export function graphql(
   source: "\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"
 ): typeof documents["\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n      }\n    }\n  }\n"];
+  source: "\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"
+): typeof documents["\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n      }\n    }\n  }\n"];
+  source: "\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"
+): typeof documents["\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"
 ): typeof documents["\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"];

src/lib/gql/graphql.ts

@@ -11783,6 +11783,7 @@ export type GetBlockListQueryQuery = {
       __typename?: "validators";
       moniker: string;
       operator_address: string;
+      identity: string;
     } | null;
   }>;
 };
@@ -11813,6 +11814,7 @@ export type GetBlockDetailsByHeightQuery = {
       __typename?: "validators";
       moniker: string;
       operator_address: string;
+      identity: string;
     } | null;
   } | null;
 };
@@ -12657,6 +12659,10 @@ export const GetBlockListQueryDocument = {
                         kind: "Field",
                         name: { kind: "Name", value: "operator_address" },
                       },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "identity" },
+                      },
                     ],
                   },
                 },
@@ -12762,6 +12768,10 @@ export const GetBlockDetailsByHeightDocument = {
                         kind: "Field",
                         name: { kind: "Name", value: "operator_address" },
                       },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "identity" },
+                      },
                     ],
                   },
                 },

src/lib/pages/account-details/data.ts

@@ -276,6 +276,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       validator: {
         validatorAddress: raw.validatorAddress,
         moniker: validators[raw.validatorAddress]?.moniker,
+        identity: raw.identity,
       },
       token: coinToTokenWithValue(raw.denom, raw.amount, assetInfos[raw.denom]),
     }));
@@ -296,6 +297,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       validator: {
         validatorAddress: raw.validatorAddress,
         moniker: validators[raw.validatorAddress]?.moniker,
+        identity: raw.identity,
       },
       completionTime: raw.completionTime,
       token: coinToTokenWithValue(
@@ -344,10 +346,12 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       srcValidator: {
         validatorAddress: raw.srcValidatorAddress,
         moniker: validators[raw.srcValidatorAddress]?.moniker,
+        identity: raw.srcIdentity,
       },
       dstValidator: {
         validatorAddress: raw.dstValidatorAddress,
         moniker: validators[raw.dstValidatorAddress]?.moniker,
+        identity: raw.dstIdentity,
       },
       completionTime: raw.completionTime,
       token: coinToTokenWithValue(

src/lib/query/block.ts

@@ -22,6 +22,7 @@ export const getBlockListQueryDocument = graphql(`
       validator {
         moniker
         operator_address
+        identity
       }
     }
   }
@@ -44,6 +45,7 @@ export const getBlockDetailsByHeightQueryDocument = graphql(`
       validator {
         moniker
         operator_address
+        identity
       }
     }
   }

src/lib/services/blockService.ts

@@ -45,6 +45,7 @@ export const useBlocklistQuery = (
                     moniker: validator.moniker,
                     validatorAddress:
                       validator.operator_address as ValidatorAddr,
+                    identity: validator.identity,
                   }
                 : null,
             })
@@ -94,6 +95,7 @@ export const useBlockDetailsQuery = (
                       moniker: blocks_by_pk.validator.moniker,
                       validatorAddress: blocks_by_pk.validator
                         .operator_address as ValidatorAddr,
+                      identity: blocks_by_pk.validator.identity,
                     }
                   : null,
               }

src/lib/services/delegation.ts

@@ -82,12 +82,14 @@ export interface RawStakingParams {
 
 export interface RawDelegation {
   validatorAddress: ValidatorAddr;
+  identity: string;
   denom: string;
   amount: string;
 }
 
 export interface RawUnbonding {
   validatorAddress: ValidatorAddr;
+  identity: string;
   completionTime: Date;
   amount: string;
 }
@@ -104,7 +106,9 @@ export interface RawDelegationRewards {
 
 export interface RawRedelegation {
   srcValidatorAddress: ValidatorAddr;
+  srcIdentity: string;
   dstValidatorAddress: ValidatorAddr;
+  dstIdentity: string;
   completionTime: Date;
   amount: string;
 }
@@ -133,14 +137,24 @@ export const getDelegations = async (
   const { data } = await axios.get<DelegationResponse>(
     `${endpoint}/cosmos/staking/v1beta1/delegations/${address}`
   );
-  return data.delegation_responses
-    .map<RawDelegation>((delegation) => ({
-      validatorAddress: delegation.delegation
-        .validator_address as ValidatorAddr,
-      denom: delegation.balance.denom,
-      amount: delegation.balance.amount,
-    }))
-    .sort((a, b) => big(b.amount).cmp(a.amount));
+  return Promise.all(
+    data.delegation_responses.map<Promise<RawDelegation>>(
+      async (delegation) => {
+        const { data: valInfo } = await axios.get(
+          `${endpoint}/cosmos/staking/v1beta1/validators/${delegation.delegation.validator_address}`
+        );
+        return {
+          validatorAddress: delegation.delegation
+            .validator_address as ValidatorAddr,
+          identity: valInfo.validator.description.identity as string,
+          denom: delegation.balance.denom,
+          amount: delegation.balance.amount,
+        };
+      }
+    )
+  ).then((delegations) =>
+    delegations.sort((a, b) => big(b.amount).cmp(a.amount))
+  );
 };
 
 export const getUnbondings = async (
@@ -150,19 +164,23 @@ export const getUnbondings = async (
   const { data } = await axios.get<UnbondingResponse>(
     `${endpoint}/cosmos/staking/v1beta1/delegators/${address}/unbonding_delegations`
   );
-  return data.unbonding_responses
-    .reduce<RawUnbonding[]>(
-      (prev, validator) =>
-        prev.concat(
-          ...validator.entries.map((entry) => ({
-            validatorAddress: validator.validator_address as ValidatorAddr,
-            completionTime: parseDate(entry.completion_time),
-            amount: entry.balance,
-          }))
-        ),
-      []
-    )
-    .sort((a, b) => a.completionTime.getTime() - b.completionTime.getTime());
+  return Promise.all(
+    data.unbonding_responses.map<Promise<RawUnbonding[]>>(async (validator) => {
+      const { data: valInfo } = await axios.get(
+        `${endpoint}/cosmos/staking/v1beta1/validators/${validator.validator_address}`
+      );
+      return validator.entries.map<RawUnbonding>((entry) => ({
+        validatorAddress: validator.validator_address as ValidatorAddr,
+        identity: valInfo.validator.description.identity as string,
+        completionTime: parseDate(entry.completion_time),
+        amount: entry.balance,
+      }));
+    })
+  ).then((unbondings) =>
+    unbondings
+      .flat()
+      .sort((a, b) => a.completionTime.getTime() - b.completionTime.getTime())
+  );
 };
 
 export const getDelegationRewards = async (
@@ -188,20 +206,32 @@ export const getRedelegations = async (
   const { data } = await axios.get<RedelegationsResponse>(
     `${endpoint}/cosmos/staking/v1beta1/delegators/${address}/redelegations`
   );
-  return data.redelegation_responses
-    .reduce<RawRedelegation[]>(
-      (prev, redelegate) =>
-        prev.concat(
-          ...redelegate.entries.map((entry) => ({
-            srcValidatorAddress: redelegate.redelegation.validator_src_address,
-            dstValidatorAddress: redelegate.redelegation.validator_dst_address,
-            completionTime: parseDate(entry.redelegation_entry.completion_time),
-            amount: entry.balance,
-          }))
-        ),
-      []
+  return Promise.all(
+    data.redelegation_responses.map<Promise<RawRedelegation[]>>(
+      async (redelegate) => {
+        const [{ data: srcValInfo }, { data: dstValInfo }] = await Promise.all([
+          axios.get(
+            `${endpoint}/cosmos/staking/v1beta1/validators/${redelegate.redelegation.validator_src_address}`
+          ),
+          axios.get(
+            `${endpoint}/cosmos/staking/v1beta1/validators/${redelegate.redelegation.validator_dst_address}`
+          ),
+        ]);
+        return redelegate.entries.map((entry) => ({
+          srcValidatorAddress: redelegate.redelegation.validator_src_address,
+          srcIdentity: srcValInfo.validator.description.identity as string,
+          dstValidatorAddress: redelegate.redelegation.validator_dst_address,
+          dstIdentity: dstValInfo.validator.description.identity as string,
+          completionTime: parseDate(entry.redelegation_entry.completion_time),
+          amount: entry.balance,
+        }));
+      }
     )
-    .sort((a, b) => a.completionTime.getTime() - b.completionTime.getTime());
+  ).then((redelegations) =>
+    redelegations
+      .flat()
+      .sort((a, b) => a.completionTime.getTime() - b.completionTime.getTime())
+  );
 };
 
 export const getCommission = async (

src/lib/services/validator.ts

@@ -1,6 +1,8 @@
 import axios from "axios";
 
-import type { ValidatorAddr } from "lib/types";
+import { CURR_THEME } from "env";
+import type { Option, ValidatorAddr, ValidatorInfo } from "lib/types";
+import { removeSpecialChars } from "lib/utils";
 
 interface ValidatorsResponse {
   validators: {
@@ -58,3 +60,29 @@ export const getValidators = async (
     {}
   );
 };
+
+export const resolveValIdentity = async (
+  apiPath: Option<string>,
+  validator: ValidatorInfo
+): Promise<string> => {
+  const githubUrl = `https://raw.githubusercontent.com/cosmostation/chainlist/master/chain/${apiPath}/moniker/${validator.validatorAddress}.png`;
+  const keybaseUrl = `https://keybase.io/_/api/1.0/user/lookup.json?key_suffix=${validator.identity}&fields=pictures`;
+  const uiAvatarsUrl = `https://ui-avatars.com/api/?name=${removeSpecialChars(
+    validator.moniker ?? ""
+  )}&background=${CURR_THEME.colors.secondary.main.replace("#", "")}&color=fff`;
+
+  return (
+    axios
+      .get(githubUrl)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      .then((_) => githubUrl)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      .catch(async (_) => {
+        if (validator.identity) {
+          const { data } = await axios.get(keybaseUrl);
+          return data.them[0].pictures.primary.url;
+        }
+        return uiAvatarsUrl;
+      })
+  );
+};