feat: add block proposer to block list and block details page

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#286](https://github.com/alleslabs/celatone-frontend/pull/286) Add block proposer
 - [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Searching can now be determined by chain
 - [#273](https://github.com/alleslabs/celatone-frontend/pull/273) Add subheader and network overview
 - [#278](https://github.com/alleslabs/celatone-frontend/pull/278) Fully wired block details page

src/lib/app-provider/query-client/index.ts

@@ -4,7 +4,7 @@ export const GRAPH_URL: Record<string, string> = {
   /**
    * Revisit graphql for terra2 mainnet and osmosis mainnet
    */
-  osmosis: "https://osmosis-mainnet-graphql.alleslabs.dev/v1/graphql",
+  osmosis: "https://osmosis-mainnet-graphql2.alleslabs.dev/v1/graphql",
   osmosistestnet: "https://osmosis-testnet-graphql2.alleslabs.dev/v1/graphql",
   terra2testnet: "https://terra-testnet-graphql.alleslabs.dev/v1/graphql",
 };

src/lib/components/ValidatorBadge.tsx

@@ -1,21 +1,33 @@
-import { Flex, Image } from "@chakra-ui/react";
+import type { ImageProps } from "@chakra-ui/react";
+import { Flex, Image, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 
 import { getChainApiPath } from "env";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { ValidatorInfo } from "lib/types";
 
 interface ValidatorBadgeProps {
-  validator: ValidatorInfo;
+  validator: ValidatorInfo | null;
+  badgeSize?: ImageProps["boxSize"];
 }
 
-export const ValidatorBadge = ({ validator }: ValidatorBadgeProps) => {
+export const ValidatorBadge = ({
+  validator,
+  badgeSize = 10,
+}: ValidatorBadgeProps) => {
   const { currentChainName } = useWallet();
 
+  if (!validator)
+    return (
+      <Text variant="body2" color="text.disabled">
+        N/A
+      </Text>
+    );
+
   return (
     <Flex alignItems="center" gap={2}>
       <Image
-        boxSize={10}
+        boxSize={badgeSize}
         src={`https://raw.githubusercontent.com/cosmostation/chainlist/master/chain/${getChainApiPath(
           currentChainName
         )}/${validator.validatorAddress}.png`}

src/lib/gql/gql.ts

@@ -5,9 +5,9 @@ import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/
 const documents = {
   "\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    }\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      }\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    }\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      }\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,
@@ -79,11 +79,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    }\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    }\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      }\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"];
 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    }\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    }\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      }\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"];
 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"];