Merge pull request #749 from alleslabs/feat/cfe-136-proposal-types

feat: multi-type proposals

CHANGELOG.md

@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#749](https://github.com/alleslabs/celatone-frontend/pull/749) Add multi-type proposals
+
 ### Improvements
 
 - [#750](https://github.com/alleslabs/celatone-frontend/pull/750) api v1 - recent codes list

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

@@ -3,17 +3,18 @@ import { useRef, useState } from "react";
 
 import { DotSeparator } from "lib/components/DotSeparator";
 import { Expedited } from "lib/components/Expedited";
+import type { ProposalType } from "lib/types";
 
 interface ProposalTextCellProps {
   title: string;
-  type: string;
+  types: ProposalType[];
   isExpedited: boolean;
   isDepositOrVoting: boolean;
 }
 
 export const ProposalTextCell = ({
   title,
-  type,
+  types,
   isExpedited,
   isDepositOrVoting,
 }: ProposalTextCellProps) => {
@@ -69,7 +70,16 @@ export const ProposalTextCell = ({
           maxW={showName ? undefined : "full"}
           className={showName ? undefined : "ellipsis"}
         >
-          {type}
+          {types.map((msgType, index) => (
+            <span key={msgType + index.toString()}>
+              {index > 0 && (
+                <span style={{ color: "var(--chakra-colors-accent-main)" }}>
+                  {" / "}
+                </span>
+              )}
+              {msgType}
+            </span>
+          ))}
         </Text>
       </Flex>
     </Flex>

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

@@ -53,9 +53,16 @@ export const ProposalsTableMobileCard = ({
             <Text color="text.main" variant="body2" wordBreak="break-word">
               {proposal.title}
             </Text>
-            <Text color="text.dark" variant="body3" wordBreak="break-word">
-              {proposal.type}
-            </Text>
+            {proposal.types.map((msgType, index) => (
+              <Text
+                key={msgType + index.toString()}
+                color="text.dark"
+                variant="body3"
+                wordBreak="break-word"
+              >
+                {msgType}
+              </Text>
+            ))}
           </Flex>
           <Flex direction="column" gap={1}>
             <MobileLabel label="Voting Ends" />
@@ -86,7 +93,7 @@ export const ProposalsTableMobileCard = ({
         !isDepositFailed
           ? () => {
               trackMintScan("proposal-detail", {
-                type: proposal.type,
+                types: proposal.types,
                 status: proposal.status,
               });
               // TOOD: revisit retrieving url (make a proper hook)

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

@@ -54,7 +54,7 @@ export const ProposalsTableRow = ({
         !isDepositFailed
           ? () => {
               trackMintScan("proposal-detail", {
-                type: proposal.type,
+                types: proposal.types,
                 status: proposal.status,
               });
               // TOOD: revisit retrieving url (make a proper hook)
@@ -86,7 +86,7 @@ export const ProposalsTableRow = ({
       >
         <ProposalTextCell
           title={proposal.title}
-          type={proposal.type}
+          types={proposal.types}
           isExpedited={proposal.isExpedited}
           isDepositOrVoting={isDepositOrVoting}
         />

src/lib/pages/proposals/index.tsx

@@ -80,6 +80,20 @@ const Proposals = () => {
     setSearch("");
   }, [currentChainId, address]);
 
+  useEffect(() => {
+    setCurrentPage(1);
+    setPageSize(10);
+  }, [
+    proposer,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(statuses),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(types),
+    debouncedSearch,
+    setCurrentPage,
+    setPageSize,
+  ]);
+
   return (
     <PageContainer>
       <Flex justify="space-between" alignItems="center">

src/lib/services/proposal.ts

@@ -76,7 +76,7 @@ const zProposalsResponseItem = z
     resolved_height: z.number().nullable(),
     status: zProposalStatus,
     title: z.string(),
-    type: zProposalType,
+    types: zProposalType.array(),
     voting_end_time: zUtcDate.nullable(),
   })
   .transform<Proposal>((val) => ({
@@ -87,7 +87,7 @@ const zProposalsResponseItem = z
     resolvedHeight: val.resolved_height,
     status: val.status,
     title: val.title,
-    type: val.type,
+    types: val.types,
     votingEndTime: val.voting_end_time,
   }));
 
@@ -135,34 +135,9 @@ export const getProposalsByAddress = async (
     })
     .then(({ data }) => zProposalsResponse.parse(data));
 
-const zRelatedProposalsResponseItem = z
-  .object({
-    deposit_end_time: zUtcDate,
-    proposal_id: z.number().nonnegative(),
-    is_expedited: z.boolean(),
-    proposer: zBechAddr,
-    resolved_height: z.number().nullable(),
-    status: zProposalStatus,
-    title: z.string(),
-    type: zProposalType,
-    voting_end_time: zUtcDate,
-  })
-  .transform<Proposal>((val) => ({
-    depositEndTime: val.deposit_end_time,
-    proposalId: val.proposal_id,
-    isExpedited: val.is_expedited,
-    proposer: val.proposer,
-    resolvedHeight: val.resolved_height,
-    status: val.status,
-    title: val.title,
-    type: val.type,
-    votingEndTime: val.voting_end_time,
-  }));
-
 const zRelatedProposalsResponse = z.object({
-  items: z.array(zRelatedProposalsResponseItem),
+  items: z.array(zProposalsResponseItem),
 });
-
 export type RelatedProposalsResponse = z.infer<
   typeof zRelatedProposalsResponse
 >;

src/lib/services/proposalService.ts

@@ -160,7 +160,8 @@ export const useRelatedProposalsByModuleIdPagination = (
           votingEndTime: parseDate(proposal.proposal.voting_end_time),
           depositEndTime: parseDate(proposal.proposal.deposit_end_time),
           resolvedHeight: proposal.proposal.resolved_height ?? null,
-          type: proposal.proposal.type as ProposalType,
+          // TODO: fix
+          types: [proposal.proposal.type as ProposalType],
           proposer: proposal.proposal.account?.address as BechAddr,
           isExpedited: Boolean(proposal.proposal.is_expedited),
         }))

src/lib/types/proposal.ts

@@ -63,7 +63,7 @@ export interface Proposal {
   votingEndTime: Nullable<Date>;
   depositEndTime: Date;
   resolvedHeight: Nullable<number>;
-  type: ProposalType;
+  types: ProposalType[];
   proposer: Option<BechAddr>;
   isExpedited: boolean;
 }