diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac5bf413a..1955859b9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -60,6 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Improvements
+- [#776](https://github.com/alleslabs/celatone-frontend/pull/776) Add expand/collapse all to proposal messages in detail page
- [#781](https://github.com/alleslabs/celatone-frontend/pull/781) Tooltip default shouldWrap
- [#774](https://github.com/alleslabs/celatone-frontend/pull/774) Add relevant contract to cosmwasm pool
- [#771](https://github.com/alleslabs/celatone-frontend/pull/771) Adjust proposal detail
diff --git a/src/lib/amplitude/track-event/trackInteraction.ts b/src/lib/amplitude/track-event/trackInteraction.ts
index 8c60a76a3..edf65d57c 100644
--- a/src/lib/amplitude/track-event/trackInteraction.ts
+++ b/src/lib/amplitude/track-event/trackInteraction.ts
@@ -77,6 +77,7 @@ export const trackUseExpand = ({
| "module_interaction_function_accordion"
| "module_interaction_selected_function_card"
| "pool_tx_msg"
+ | "proposal_message_card"
| "resources_detail_card"
| "resources_by_account_card";
info?: object;
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
index 90ce599c6..324e0cc87 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -50,6 +50,7 @@ export const ResourceSectionBody = ({
const selectedResource = resourcesByOwner
?.find((resource) => resource.owner === selectedAccountParam)
?.resources?.find((resource) => resource.group === selectedNameParam);
+
useEffect(() => {
setExpandedIndexes(selectedResource?.items.length === 1 ? [0] : []);
}, [resourcesByOwner, selectedResource]);
diff --git a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx
new file mode 100644
index 000000000..f104e4aeb
--- /dev/null
+++ b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx
@@ -0,0 +1,60 @@
+import {
+ AccordionButton,
+ AccordionIcon,
+ AccordionItem,
+ AccordionPanel,
+ Flex,
+ Text,
+} from "@chakra-ui/react";
+
+import { trackUseExpand } from "lib/amplitude";
+import JsonReadOnly from "lib/components/json/JsonReadOnly";
+
+interface ProposalMessageCardProps {
+ header: string;
+ jsonString: string;
+}
+
+export const ProposalMessageCard = ({
+ header,
+ jsonString,
+}: ProposalMessageCardProps) => (
+
+ {({ isExpanded }) => (
+ <>
+
+ trackUseExpand({
+ action: !isExpanded ? "expand" : "collapse",
+ component: "proposal_message_card",
+ section: "proposal message",
+ })
+ }
+ >
+
+
+
+ {header}
+
+
+
+
+
+
+
+
+
+
+ >
+ )}
+
+);
diff --git a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx
index c4dd3e490..02aa41c44 100644
--- a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx
+++ b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx
@@ -1,39 +1,73 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
+import { Accordion, Button, Flex, Heading } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
-import { JsonInfo } from "lib/components/json/JsonInfo";
+import { trackUseExpandAll } from "lib/amplitude";
+import { CustomIcon } from "lib/components/icon";
import type { ProposalData } from "lib/types";
import { jsonPrettify } from "lib/utils";
+import { ProposalMessageCard } from "./ProposalMessageCard";
+
interface ProposalMessagesProps {
messages: ProposalData["messages"];
}
+export const ProposalMessages = ({ messages }: ProposalMessagesProps) => {
+ const [expandedIndexes, setExpandedIndexes] = useState([]);
+
+ useEffect(() => {
+ setExpandedIndexes(messages?.length === 1 ? [0] : []);
+ }, [messages]);
-export const ProposalMessages = ({ messages }: ProposalMessagesProps) => (
-
-
- Proposal Messages
-
- {messages?.length ? (
- <>
- {messages.map((item, i) => (
-
+
+
+ Proposal Messages
+
+
+ }
+ onClick={() => {
+ trackUseExpandAll(
+ expandedIndexes.length ? "collapse" : "expand",
+ "Proposal Messages"
+ );
+ setExpandedIndexes((prev) =>
+ !prev.length ? Array.from(Array(messages?.length).keys()) : []
+ );
+ }}
+ >
+ {expandedIndexes.length ? "Collapse All" : "Expand All"}
+
+
+ setExpandedIndexes(indexes)}
+ >
+ {messages?.map((item, i) => (
+
))}
- >
- ) : (
-
- No Messages
-
- )}
-
-);
+
+
+ );
+};
diff --git a/src/lib/styles/theme/components/accordion.ts b/src/lib/styles/theme/components/accordion.ts
index 7076deb97..58637a6b0 100644
--- a/src/lib/styles/theme/components/accordion.ts
+++ b/src/lib/styles/theme/components/accordion.ts
@@ -16,6 +16,7 @@ const gray900 = definePartsStyle({
borderRadius: "0px 8px 8px 0px",
},
});
+
const transparent = definePartsStyle({
container: {
bg: "transparent",