Feat/cfe 209 proposal messages

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#760](https://github.com/alleslabs/celatone-frontend/pull/760) Add proposal messages
 - [#764](https://github.com/alleslabs/celatone-frontend/pull/764) api v1 - proposal params
 - [#759](https://github.com/alleslabs/celatone-frontend/pull/759) Add proposal description and metadata
 - [#762](https://github.com/alleslabs/celatone-frontend/pull/762) api v1 - proposal validator votes info

src/lib/pages/contract-details/components/JsonInfo.tsx → src/lib/components/json/JsonInfo.tsx

@@ -1,8 +1,9 @@
 import { Flex, Heading } from "@chakra-ui/react";
 import { useState } from "react";
 
-import { CustomIcon } from "lib/components/icon";
-import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { CustomIcon } from "../icon";
+
+import JsonReadOnly from "./JsonReadOnly";
 
 interface JsonInfoProps {
   header: string;
@@ -30,7 +31,7 @@ export const JsonInfo = ({
         cursor="pointer"
         onClick={() => setExpand((prev) => !prev)}
       >
-        <Heading as="h6" variant="h6">
+        <Heading as="h6" variant="h6" wordBreak="break-word">
           {header}
         </Heading>
         <CustomIcon

src/lib/pages/contract-details/index.tsx

@@ -22,6 +22,7 @@ import { AssetsSection } from "lib/components/asset";
 import { CustomTab } from "lib/components/CustomTab";
 import { DelegationsSection } from "lib/components/delegations";
 import { CustomIcon } from "lib/components/icon";
+import { JsonInfo } from "lib/components/json/JsonInfo";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { ErrorFetching, InvalidState } from "lib/components/state";
@@ -34,7 +35,6 @@ import { ContractDesc } from "./components/contract-description";
 import { ContractStates } from "./components/contract-states";
 import { ContractTop } from "./components/ContractTop";
 import { InstantiateInfo } from "./components/InstantiateInfo";
-import { JsonInfo } from "./components/JsonInfo";
 import { ContractTables } from "./components/tables";
 import { useContractData } from "./data";
 import { TabIndex, zContractDetailsQueryParams } from "./types";

src/lib/pages/proposal-details/components/ProposalOverview.tsx

@@ -1,8 +1,9 @@
 import { Flex, Grid, GridItem, Heading, Text, Box } from "@chakra-ui/react";
 
+import { JsonInfo } from "lib/components/json/JsonInfo";
 import { Markdown } from "lib/components/Markdown";
 import type { ProposalData } from "lib/types";
-import { isUrl } from "lib/utils";
+import { isUrl, jsonPrettify } from "lib/utils";
 
 const ProposalStatus = () => {
   return (
@@ -107,14 +108,22 @@ export const ProposalOverview = ({ proposalData }: ProposalOverviewProps) => {
             <Heading as="h6" variant="h6">
               Proposal Messages
             </Heading>
-            <Flex
-              background="gray.900"
-              minH={64}
-              alignItems="center"
-              justifyContent="center"
-            >
-              Proposal message content
-            </Flex>
+            {proposalData.messages?.length ? (
+              <>
+                {proposalData.messages.map((item, i) => (
+                  <JsonInfo
+                    header={`[${i}] ${item["@type"]}`}
+                    jsonString={jsonPrettify(JSON.stringify(item))}
+                    defaultExpand={proposalData.messages?.length === 1}
+                    key={`msg-${item}`}
+                  />
+                ))}
+              </>
+            ) : (
+              <Text variant="body1" color="text.dark">
+                No Messages
+              </Text>
+            )}
           </Flex>
         </Flex>
       </GridItem>

src/lib/services/proposal.ts

@@ -200,7 +200,13 @@ const zProposalDataResponse = z.object({
       created_timestamp: zUtcDate.nullable(),
       created_tx_hash: z.string().nullable(),
       description: z.string(),
-      messages: z.unknown().array().nullable(),
+      messages: z
+        .object({
+          "@type": z.string(),
+        })
+        .passthrough()
+        .array()
+        .nullable(),
       metadata: z.string(),
       proposal_deposits: z
         .object({

src/lib/types/proposal.ts

@@ -95,12 +95,18 @@ export interface ProposalDeposit {
   txHash: string;
 }
 
+// TODO: combine with MsgBody in services/tx.ts
+interface Message {
+  "@type": string;
+  [key: string]: unknown;
+}
+
 export interface ProposalData extends Proposal {
   createdHeight: Nullable<number>;
   createdTimestamp: Nullable<Date>;
   createdTxHash: Nullable<string>;
   description: string;
-  messages: Nullable<unknown[]>;
+  messages: Nullable<Message[]>;
   metadata: string;
   proposalDeposits: ProposalDeposit[];
   resolvedTimestamp: Nullable<Date>;