feat: add proposal of an user

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#222](https://github.com/alleslabs/celatone-frontend/pull/222) Add proposals of an account
 - [#218](https://github.com/alleslabs/celatone-frontend/pull/218) Add instantiated and admin contracts of an account
 - [#192](https://github.com/alleslabs/celatone-frontend/pull/192) Add alternative sidebar with only icons
 - [#210](https://github.com/alleslabs/celatone-frontend/pull/210) New design for token card, currently support price

src/lib/pages/contract-details/components/tables/related-proposals/RelatedProposalsHeader.tsx → src/lib/components/table/proposals/ProposalsTableHeader.tsx

@@ -3,7 +3,7 @@ import { Grid } from "@chakra-ui/react";
 
 import { TableHeader } from "lib/components/table";
 
-export const RelatedProposalsHeader = ({
+export const ProposalsTableHeader = ({
   templateColumns,
 }: {
   templateColumns: GridProps["templateColumns"];
@@ -14,7 +14,7 @@ export const RelatedProposalsHeader = ({
       <TableHeader>Proposal Title</TableHeader>
       <TableHeader textAlign="center">Status</TableHeader>
       <TableHeader>Vote Finish on</TableHeader>
-      <TableHeader>Resolve Block Height</TableHeader>
+      <TableHeader>Resolved Block Height</TableHeader>
       <TableHeader>Type</TableHeader>
       <TableHeader>Proposer</TableHeader>
     </Grid>

src/lib/pages/contract-details/components/tables/related-proposals/RelatedProposalsRow.tsx → src/lib/components/table/proposals/ProposalsTableRow.tsx

@@ -4,14 +4,14 @@ import { Flex, Grid, Text } from "@chakra-ui/react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TableRow } from "lib/components/table";
 import { useGetAddressType } from "lib/hooks";
-import type { ContractRelatedProposals } from "lib/types";
+import type { Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import { StatusChip } from "./StatusChip";
 
-interface RelatedProposalsRowProps {
-  proposal: ContractRelatedProposals;
+interface ProposalsTableRowProps {
+  proposal: Proposal;
   templateColumns: GridProps["templateColumns"];
 }
 
@@ -20,9 +20,9 @@ const VotingEndTimeRender = ({
   depositEndTime,
   status,
 }: {
-  votingEndTime: ContractRelatedProposals["votingEndTime"];
-  depositEndTime: ContractRelatedProposals["depositEndTime"];
-  status: ContractRelatedProposals["status"];
+  votingEndTime: Proposal["votingEndTime"];
+  depositEndTime: Proposal["depositEndTime"];
+  status: Proposal["status"];
 }) => {
   if (status === ProposalStatus.INACTIVE) {
     return <Text color="text.dark">N/A</Text>;
@@ -59,7 +59,7 @@ const ResolvedHeightRender = ({
   resolvedHeight,
   isInactive,
 }: {
-  resolvedHeight: RelatedProposalsRowProps["proposal"]["resolvedHeight"];
+  resolvedHeight: ProposalsTableRowProps["proposal"]["resolvedHeight"];
   isInactive: boolean;
 }) => {
   if (isInactive) return <Text color="text.dark">N/A</Text>;
@@ -80,10 +80,10 @@ const ResolvedHeightRender = ({
   }
 };
 
-export const RelatedProposalsRow = ({
+export const ProposalsTableRow = ({
   proposal,
   templateColumns,
-}: RelatedProposalsRowProps) => {
+}: ProposalsTableRowProps) => {
   const getAddressType = useGetAddressType();
   const isInactive = proposal.status === ProposalStatus.INACTIVE;
   return (

src/lib/pages/contract-details/components/tables/related-proposals/StatusChip.tsx → src/lib/components/table/proposals/StatusChip.tsx

@@ -1,7 +1,7 @@
 import { chakra, Tag } from "@chakra-ui/react";
 import type { CSSProperties } from "react";
 
-import type { ContractRelatedProposals } from "lib/types";
+import type { Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
 
 const StyledTag = chakra(Tag, {
@@ -16,7 +16,7 @@ const StyledTag = chakra(Tag, {
 });
 
 const getBgColor = (
-  status: ContractRelatedProposals["status"]
+  status: Proposal["status"]
 ): CSSProperties["backgroundColor"] => {
   switch (status) {
     case ProposalStatus.DEPOSIT_PERIOD:
@@ -34,11 +34,7 @@ const getBgColor = (
   }
 };
 
-export const StatusChip = ({
-  status,
-}: {
-  status: ContractRelatedProposals["status"];
-}) => {
+export const StatusChip = ({ status }: { status: Proposal["status"] }) => {
   return (
     <StyledTag bgColor={getBgColor(status)}>
       {status === ProposalStatus.INACTIVE ? "DepositFailed" : status}

src/lib/components/table/proposals/index.tsx

@@ -0,0 +1,2 @@
+export * from "./ProposalsTableHeader";
+export * from "./ProposalsTableRow";

src/lib/gql/gql.ts

@@ -49,7 +49,7 @@ const documents = {
     types.GetRelatedProposalsByContractAddressPaginationDocument,
   "\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetRelatedProposalsCountByContractAddressDocument,
-  "\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n    }\n  }\n":
+  "\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n      contract_proposals {\n        resolved_height\n      }\n      code_proposals {\n        resolved_height\n      }\n    }\n  }\n":
     types.GetProposalsByWalletAddressPaginationDocument,
   "\n  query getProposalsCountByWalletAddress($walletAddress: String!) {\n    proposals_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetProposalsCountByWalletAddressDocument,
@@ -129,8 +129,8 @@ export function graphql(
   source: "\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n    }\n  }\n"
-): typeof documents["\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n    }\n  }\n"];
+  source: "\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n      contract_proposals {\n        resolved_height\n      }\n      code_proposals {\n        resolved_height\n      }\n    }\n  }\n"
+): typeof documents["\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n      contract_proposals {\n        resolved_height\n      }\n      code_proposals {\n        resolved_height\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getProposalsCountByWalletAddress($walletAddress: String!) {\n    proposals_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getProposalsCountByWalletAddress($walletAddress: String!) {\n    proposals_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];

src/lib/gql/graphql.ts

@@ -7327,6 +7327,14 @@ export type GetProposalsByWalletAddressPaginationQuery = {
     deposit_end_time: any;
     type: string;
     id: number;
+    contract_proposals: Array<{
+      __typename?: "contract_proposals";
+      resolved_height?: number | null;
+    }>;
+    code_proposals: Array<{
+      __typename?: "code_proposals";
+      resolved_height?: number | null;
+    }>;
   }>;
 };
 
@@ -10783,6 +10791,20 @@ export const GetProposalsByWalletAddressPaginationDocument = {
                   ],
                 },
               },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "id" },
+                      value: { kind: "EnumValue", value: "desc" },
+                    },
+                  ],
+                },
+              },
               {
                 kind: "Argument",
                 name: { kind: "Name", value: "offset" },
@@ -10815,6 +10837,32 @@ export const GetProposalsByWalletAddressPaginationDocument = {
                 },
                 { kind: "Field", name: { kind: "Name", value: "type" } },
                 { kind: "Field", name: { kind: "Name", value: "id" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "contract_proposals" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "resolved_height" },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "code_proposals" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "resolved_height" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },

src/lib/model/account.ts

@@ -19,7 +19,7 @@ export const useAccountDetailsTableCounts = (walletAddress: HumanAddr) => {
     useContractListCountByAdmin(walletAddress);
   const { data: contractsCount, refetch: refetchContractsCount } =
     useInstantiatedCountByUserQuery(walletAddress);
-  const { data: proposalCount, refetch: refetchProposalCount } =
+  const { data: proposalsCount, refetch: refetchProposalsCount } =
     useProposalsCountByWalletAddress(walletAddress);
   const { data: countTxs, refetch: refetchCountTxs } = useTxQueryCount(
     walletAddress,
@@ -42,12 +42,12 @@ export const useAccountDetailsTableCounts = (walletAddress: HumanAddr) => {
       contractsAdminCount,
       contractsCount,
       countTxs,
-      proposalCount,
+      proposalsCount,
     },
     refetchCodes,
     refetchContractsAdminCount,
     refetchContractsCount,
     refetchCountTxs,
-    refetchProposalCount,
+    refetchProposalsCount,
   };
 };

src/lib/pages/account-details/components/tables/index.tsx

@@ -0,0 +1,2 @@
+export * from "./contracts";
+export * from "./proposals";

src/lib/pages/account-details/components/tables/proposals/ProposalsTable.tsx

@@ -0,0 +1,124 @@
+import { Box, Flex } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import type { ChangeEvent } from "react";
+
+import { Loading } from "lib/components/Loading";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state/EmptyState";
+import { TableContainer } from "lib/components/table";
+import {
+  ProposalsTableHeader,
+  ProposalsTableRow,
+} from "lib/components/table/proposals";
+import { TableTitle } from "lib/components/table/TableTitle";
+import { ViewMore } from "lib/components/table/ViewMore";
+import { useProposalsByWalletAddressPagination } from "lib/services/proposalService";
+import type { HumanAddr, Option } from "lib/types";
+
+interface ProposalsTableProps {
+  walletAddress: HumanAddr;
+  scrollComponentId: string;
+  totalData: Option<number>;
+  refetchCount: () => void;
+  onViewMore?: () => void;
+}
+
+const ProposalsTableBody = observer(
+  ({
+    walletAddress,
+    scrollComponentId,
+    totalData,
+    refetchCount,
+    onViewMore,
+  }: ProposalsTableProps) => {
+    const {
+      pagesQuantity,
+      currentPage,
+      setCurrentPage,
+      pageSize,
+      setPageSize,
+      offset,
+    } = usePaginator({
+      total: totalData,
+      initialState: {
+        pageSize: 10,
+        currentPage: 1,
+        isDisabled: false,
+      },
+    });
+    const { data: proposals, isLoading } =
+      useProposalsByWalletAddressPagination(
+        walletAddress,
+        offset,
+        onViewMore ? 5 : pageSize
+      );
+
+    const onPageChange = (nextPage: number) => {
+      refetchCount();
+      setCurrentPage(nextPage);
+    };
+
+    const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+      const size = Number(e.target.value);
+      refetchCount();
+      setPageSize(size);
+      setCurrentPage(1);
+    };
+
+    const templateColumns =
+      "100px minmax(300px, 1fr) 150px 280px 180px 190px 160px";
+
+    if (isLoading) return <Loading />;
+    if (!proposals?.length)
+      return (
+        <Flex
+          py="64px"
+          direction="column"
+          borderY="1px solid"
+          borderColor="pebble.700"
+        >
+          <EmptyState message="This account did not open any proposals before." />
+        </Flex>
+      );
+    return (
+      <>
+        <TableContainer>
+          <ProposalsTableHeader templateColumns={templateColumns} />
+          {proposals.map((proposal) => (
+            <ProposalsTableRow
+              key={proposal.proposalId}
+              proposal={proposal}
+              templateColumns={templateColumns}
+            />
+          ))}
+        </TableContainer>
+        {totalData &&
+          (onViewMore
+            ? totalData > 5 && <ViewMore onClick={onViewMore} />
+            : totalData > 10 && (
+                <Pagination
+                  currentPage={currentPage}
+                  pagesQuantity={pagesQuantity}
+                  offset={offset}
+                  totalData={totalData}
+                  scrollComponentId={scrollComponentId}
+                  pageSize={pageSize}
+                  onPageChange={onPageChange}
+                  onPageSizeChange={onPageSizeChange}
+                />
+              ))}
+      </>
+    );
+  }
+);
+
+export const ProposalsTable = ({
+  totalData,
+  ...componentProps
+}: ProposalsTableProps) => (
+  <Box mt={12} mb={4}>
+    <TableTitle title="Opened Proposals" count={totalData ?? 0} />
+    <ProposalsTableBody totalData={totalData} {...componentProps} />
+  </Box>
+);

src/lib/pages/account-details/components/tables/proposals/index.tsx

@@ -0,0 +1 @@
+export * from "./ProposalsTable";