Skip to content

Commit

Permalink
Merge pull request #272 from alleslabs/pages/block-list
Browse files Browse the repository at this point in the history 
feat: (WIP) blocks page w/o proposer
  • Loading branch information
@poomthiti
poomthiti authored Apr 17, 2023
2 parents a1cd338 + 4baaee4 commit 62da033
Show file tree
Hide file tree
Showing 13 changed files with 493 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Features

- [#272](https://github.com/alleslabs/celatone-frontend/pull/272) Add blocks page and table component
- [#271](https://github.com/alleslabs/celatone-frontend/pull/271) Create transaction list page
- [#245](https://github.com/alleslabs/celatone-frontend/pull/245) Add amplitude for account detail page
- [#232](https://github.com/alleslabs/celatone-frontend/pull/232) Add delegation data and section for the account detail page
Expand Down
10 changes: 10 additions & 0 deletions src/lib/gql/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ 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":
types.GetBlockListQueryDocument,
"\n query getBlockCountQuery {\n blocks(limit: 1, order_by: { height: desc }) {\n height\n }\n }\n":
types.GetBlockCountQueryDocument,
"\n query getCodeListQuery {\n codes(limit: 100, offset: 0, order_by: { id: desc }) {\n id\n contracts_aggregate {\n aggregate {\n count\n }\n }\n account {\n uploader: address\n }\n access_config_permission\n access_config_addresses\n cw2_contract\n cw2_version\n }\n }\n":
types.GetCodeListQueryDocument,
"\n query getCodeListByUserQuery($walletAddr: String!) {\n codes(\n where: { account: { address: { _eq: $walletAddr } } }\n limit: 100\n offset: 0\n order_by: { id: desc }\n ) {\n id\n contracts_aggregate {\n aggregate {\n count\n }\n }\n account {\n uploader: address\n }\n access_config_permission\n access_config_addresses\n cw2_contract\n cw2_version\n }\n }\n":
Expand Down Expand Up @@ -68,6 +72,12 @@ const documents = {
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"];
export function graphql(
source: "\n query getBlockCountQuery {\n blocks(limit: 1, order_by: { height: desc }) {\n height\n }\n }\n"
): typeof documents["\n query getBlockCountQuery {\n blocks(limit: 1, order_by: { height: desc }) {\n height\n }\n }\n"];
export function graphql(
source: "\n query getCodeListQuery {\n codes(limit: 100, offset: 0, order_by: { id: desc }) {\n id\n contracts_aggregate {\n aggregate {\n count\n }\n }\n account {\n uploader: address\n }\n access_config_permission\n access_config_addresses\n cw2_contract\n cw2_version\n }\n }\n"
): typeof documents["\n query getCodeListQuery {\n codes(limit: 100, offset: 0, order_by: { id: desc }) {\n id\n contracts_aggregate {\n aggregate {\n count\n }\n }\n account {\n uploader: address\n }\n access_config_permission\n access_config_addresses\n cw2_contract\n cw2_version\n }\n }\n"];
Expand Down
234 changes: 234 additions & 0 deletions src/lib/gql/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8215,6 +8215,10 @@ export type Query_Root = {
proposals_aggregate: Proposals_Aggregate;
/** fetch data from the table: "proposals" using primary key columns */
proposals_by_pk?: Maybe<Proposals>;
/** execute function "search_pools_with_denom" which returns "pools" */
search_pools_with_denom: Array<Pools>;
/** execute function "search_pools_with_denom" and query aggregates on result of table type "pools" */
search_pools_with_denom_aggregate: Pools_Aggregate;
/** fetch data from the table: "tracking" */
tracking: Array<Tracking>;
/** fetch aggregated fields from the table: "tracking" */
Expand Down Expand Up @@ -8554,6 +8558,24 @@ export type Query_RootProposals_By_PkArgs = {
id: Scalars["Int"];
};

export type Query_RootSearch_Pools_With_DenomArgs = {
args: Search_Pools_With_Denom_Args;
distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
limit?: InputMaybe<Scalars["Int"]>;
offset?: InputMaybe<Scalars["Int"]>;
order_by?: InputMaybe<Array<Pools_Order_By>>;
where?: InputMaybe<Pools_Bool_Exp>;
};

export type Query_RootSearch_Pools_With_Denom_AggregateArgs = {
args: Search_Pools_With_Denom_Args;
distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
limit?: InputMaybe<Scalars["Int"]>;
offset?: InputMaybe<Scalars["Int"]>;
order_by?: InputMaybe<Array<Pools_Order_By>>;
where?: InputMaybe<Pools_Bool_Exp>;
};

export type Query_RootTrackingArgs = {
distinct_on?: InputMaybe<Array<Tracking_Select_Column>>;
limit?: InputMaybe<Scalars["Int"]>;
Expand Down Expand Up @@ -8627,6 +8649,10 @@ export type Query_RootTransactions_By_PkArgs = {
hash: Scalars["bytea"];
};

export type Search_Pools_With_Denom_Args = {
denom?: InputMaybe<Scalars["String"]>;
};

export type Subscription_Root = {
__typename?: "subscription_root";
/** An array relationship */
Expand Down Expand Up @@ -8751,6 +8777,10 @@ export type Subscription_Root = {
proposals_by_pk?: Maybe<Proposals>;
/** fetch data from the table in a streaming manner: "proposals" */
proposals_stream: Array<Proposals>;
/** execute function "search_pools_with_denom" which returns "pools" */
search_pools_with_denom: Array<Pools>;
/** execute function "search_pools_with_denom" and query aggregates on result of table type "pools" */
search_pools_with_denom_aggregate: Pools_Aggregate;
/** fetch data from the table: "tracking" */
tracking: Array<Tracking>;
/** fetch aggregated fields from the table: "tracking" */
Expand Down Expand Up @@ -9206,6 +9236,24 @@ export type Subscription_RootProposals_StreamArgs = {
where?: InputMaybe<Proposals_Bool_Exp>;
};

export type Subscription_RootSearch_Pools_With_DenomArgs = {
args: Search_Pools_With_Denom_Args;
distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
limit?: InputMaybe<Scalars["Int"]>;
offset?: InputMaybe<Scalars["Int"]>;
order_by?: InputMaybe<Array<Pools_Order_By>>;
where?: InputMaybe<Pools_Bool_Exp>;
};

export type Subscription_RootSearch_Pools_With_Denom_AggregateArgs = {
args: Search_Pools_With_Denom_Args;
distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
limit?: InputMaybe<Scalars["Int"]>;
offset?: InputMaybe<Scalars["Int"]>;
order_by?: InputMaybe<Array<Pools_Order_By>>;
where?: InputMaybe<Pools_Bool_Exp>;
};

export type Subscription_RootTrackingArgs = {
distinct_on?: InputMaybe<Array<Tracking_Select_Column>>;
limit?: InputMaybe<Scalars["Int"]>;
Expand Down Expand Up @@ -10939,6 +10987,35 @@ export type GetBlockTimestampByHeightQueryQuery = {
blocks_by_pk?: { __typename?: "blocks"; timestamp: any } | null;
};

export type GetBlockListQueryQueryVariables = Exact<{
limit: Scalars["Int"];
offset: Scalars["Int"];
}>;

export type GetBlockListQueryQuery = {
__typename?: "query_root";
blocks: Array<{
__typename?: "blocks";
hash: any;
height: number;
timestamp: any;
transactions_aggregate: {
__typename?: "transactions_aggregate";
aggregate?: {
__typename?: "transactions_aggregate_fields";
count: number;
} | null;
};
}>;
};

export type GetBlockCountQueryQueryVariables = Exact<{ [key: string]: never }>;

export type GetBlockCountQueryQuery = {
__typename?: "query_root";
blocks: Array<{ __typename?: "blocks"; height: number }>;
};

export type GetCodeListQueryQueryVariables = Exact<{ [key: string]: never }>;

export type GetCodeListQueryQuery = {
Expand Down Expand Up @@ -11548,6 +11625,163 @@ export const GetBlockTimestampByHeightQueryDocument = {
GetBlockTimestampByHeightQueryQuery,
GetBlockTimestampByHeightQueryQueryVariables
>;
export const GetBlockListQueryDocument = {
kind: "Document",
definitions: [
{
kind: "OperationDefinition",
operation: "query",
name: { kind: "Name", value: "getBlockListQuery" },
variableDefinitions: [
{
kind: "VariableDefinition",
variable: {
kind: "Variable",
name: { kind: "Name", value: "limit" },
},
type: {
kind: "NonNullType",
type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
},
},
{
kind: "VariableDefinition",
variable: {
kind: "Variable",
name: { kind: "Name", value: "offset" },
},
type: {
kind: "NonNullType",
type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
},
},
],
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "blocks" },
arguments: [
{
kind: "Argument",
name: { kind: "Name", value: "limit" },
value: {
kind: "Variable",
name: { kind: "Name", value: "limit" },
},
},
{
kind: "Argument",
name: { kind: "Name", value: "offset" },
value: {
kind: "Variable",
name: { kind: "Name", value: "offset" },
},
},
{
kind: "Argument",
name: { kind: "Name", value: "order_by" },
value: {
kind: "ObjectValue",
fields: [
{
kind: "ObjectField",
name: { kind: "Name", value: "height" },
value: { kind: "EnumValue", value: "desc" },
},
],
},
},
],
selectionSet: {
kind: "SelectionSet",
selections: [
{ kind: "Field", name: { kind: "Name", value: "hash" } },
{ kind: "Field", name: { kind: "Name", value: "height" } },
{ kind: "Field", name: { kind: "Name", value: "timestamp" } },
{
kind: "Field",
name: { kind: "Name", value: "transactions_aggregate" },
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "aggregate" },
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "count" },
},
],
},
},
],
},
},
],
},
},
],
},
},
],
} as unknown as DocumentNode<
GetBlockListQueryQuery,
GetBlockListQueryQueryVariables
>;
export const GetBlockCountQueryDocument = {
kind: "Document",
definitions: [
{
kind: "OperationDefinition",
operation: "query",
name: { kind: "Name", value: "getBlockCountQuery" },
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "blocks" },
arguments: [
{
kind: "Argument",
name: { kind: "Name", value: "limit" },
value: { kind: "IntValue", value: "1" },
},
{
kind: "Argument",
name: { kind: "Name", value: "order_by" },
value: {
kind: "ObjectValue",
fields: [
{
kind: "ObjectField",
name: { kind: "Name", value: "height" },
value: { kind: "EnumValue", value: "desc" },
},
],
},
},
],
selectionSet: {
kind: "SelectionSet",
selections: [
{ kind: "Field", name: { kind: "Name", value: "height" } },
],
},
},
],
},
},
],
} as unknown as DocumentNode<
GetBlockCountQueryQuery,
GetBlockCountQueryQueryVariables
>;
export const GetCodeListQueryDocument = {
kind: "Document",
definitions: [
Expand Down
24 changes: 24 additions & 0 deletions src/lib/pages/blocks/components/BlocksHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import type { GridProps } from "@chakra-ui/react";
import { Grid } from "@chakra-ui/react";

import { TableHeader } from "lib/components/table";

interface BlocksHeaderProps {
templateColumns: GridProps["templateColumns"];
scrollComponentId: string;
}

export const BlocksHeader = ({
templateColumns,
scrollComponentId,
}: BlocksHeaderProps) => {
return (
<Grid templateColumns={templateColumns} id={scrollComponentId}>
<TableHeader>Block Height</TableHeader>
<TableHeader>Block Hash</TableHeader>
<TableHeader>Proposed by</TableHeader>
<TableHeader textAlign="center">Transactions</TableHeader>
<TableHeader>Timestamp</TableHeader>
</Grid>
);
};
42 changes: 42 additions & 0 deletions src/lib/pages/blocks/components/BlocksRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import type { GridProps } from "@chakra-ui/react";
import { Flex, Text, Grid } from "@chakra-ui/react";

import { ExplorerLink } from "lib/components/ExplorerLink";
import { TableRow } from "lib/components/table";
import type { BlockInfo } from "lib/types/block";
import { dateFromNow, formatUTC, truncate } from "lib/utils";

interface BlocksRowProps {
templateColumns: GridProps["templateColumns"];
blockData: BlockInfo;
}

export const BlocksRow = ({ templateColumns, blockData }: BlocksRowProps) => {
return (
<Grid templateColumns={templateColumns}>
<TableRow>
<ExplorerLink
type="block_height"
value={blockData.height}
showCopyOnHover
>
{blockData.height}
</ExplorerLink>
</TableRow>
<TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
{/* TODO: Wireup Proposer */}
<TableRow>mitovaloper325KJNUFNU12N4J1KBTDXD</TableRow>
<TableRow justifyContent="center">{blockData.txCount}</TableRow>
<TableRow>
<Flex direction="column">
<Text variant="body2" color="text.dark" mb="2px">
{formatUTC(blockData.timestamp)}
</Text>
<Text variant="body3" color="text.disabled">
({dateFromNow(blockData.timestamp)})
</Text>
</Flex>
</TableRow>
</Grid>
);
};
Loading

0 comments on commit 62da033

Please sign in to comment.