feat: display content properly

apps/namada-interface/src/App/Governance/Governance.components.ts

@@ -139,6 +139,12 @@ export const ProposalDetailsContent = styled.div`
   color: ${(props) => props.theme.colors.utility1.main};
 `;
 
+export const ProposalDetailsContentMainHeader = styled.h1``;
+export const ProposalDetailsContentSubHeader = styled.h3`
+  text-transform: capitalize;
+`;
+export const ProposalDetailsContentParagraph = styled.p``;
+
 export const ProposalDetailsAddresses = styled.div``;
 export const ProposalDetailsAddressesHeader = styled.h4`
   margin-bottom: 0px;

apps/namada-interface/src/App/Governance/Governance.tsx

@@ -19,32 +19,7 @@ import { SettingsState } from "slices/settings";
 import { useAppSelector } from "store";
 import { useCallback, useEffect, useState } from "react";
 import { ProposalDetails } from "./ProposalDetails";
-
-export type Proposal = {
-  id: string;
-  proposalType: string;
-  author: string;
-  startEpoch: bigint;
-  endEpoch: bigint;
-  graceEpoch: bigint;
-  content: Content;
-  status: string;
-  yesVotes?: string;
-  totalVotingPower?: string;
-  result?: string;
-};
-
-export type Content = {
-  abstract: string;
-  authors: string;
-  created: string;
-  details: string;
-  discussionsTo: string;
-  license: string;
-  motivation: string;
-  requires: string;
-  title: string;
-};
+import { Proposal } from "./types";
 
 const getStatus = (status: string, result?: string): string => {
   return result || status;
@@ -85,18 +60,10 @@ export const Governance = (): JSX.Element => {
   useEffect(() => {
     const fetchProposals = async (): Promise<void> => {
       try {
-        const sdkProposals = await query.query_proposals();
+        const sdkProposals = await query.queryProposals();
         const proposals = sdkProposals.map((proposal) => ({
           ...proposal,
-          proposalType: proposal.proposal_type,
-          startEpoch: BigInt(proposal.start_epoch),
-          endEpoch: BigInt(proposal.end_epoch),
-          graceEpoch: BigInt(proposal.grace_epoch),
-          content: {
-            ...proposal.content,
-            discussionsTo: proposal.content["discussions-to"],
-          },
-          totalVotingPower: proposal.total_voting_power,
+          content: JSON.parse(proposal.contentJSON) as Record<string, string>,
         }));
         setProposals(proposals);
       } catch (e) {
@@ -131,12 +98,13 @@ export const Governance = (): JSX.Element => {
             <ProposalCardInfoContainer>
               <ProposalCardText>
                 <ProposalCardId>{"#" + proposal.id}</ProposalCardId>
-                {proposal.content.title}: {proposal.content.details}
+                {proposal.content.title && `${proposal.content.title}: `}
+                {proposal.content.details || ""}
               </ProposalCardText>
               {proposal.yesVotes && proposal.totalVotingPower && (
                 <ProposalCardVotes
-                  yes={proposal.yesVotes}
-                  total={proposal.totalVotingPower}
+                  yes={proposal.yesVotes.toString()}
+                  total={proposal.totalVotingPower.toString()}
                 />
               )}
             </ProposalCardInfoContainer>

apps/namada-interface/src/App/Governance/ProposalDetails.tsx

@@ -17,27 +17,32 @@ import {
   ProposalDetailsAddressesHeader,
   ProposalDetailsButtons,
   ProposalDetailsContent,
+  ProposalDetailsContentSubHeader,
+  ProposalDetailsContentParagraph,
+  ProposalDetailsContentMainHeader,
 } from "./Governance.components";
-import { Proposal } from "slices/proposals";
 import { useCallback, useEffect, useState } from "react";
 import { SettingsState } from "slices/settings";
 import { AccountsState } from "slices/accounts";
-import { AppLoader } from "App/App.components";
-import { pipe } from "fp-ts/lib/function";
+import { Proposal } from "./types";
 
 export type ProposalDetailsProps = {
   open: boolean;
   onClose: () => void;
   maybeProposal: O.Option<Proposal>;
 };
 
-export const ProposalDetails = (props: ProposalDetailsProps): JSX.Element => {
-  if (O.isNone(props.maybeProposal)) {
-    return <></>;
-  }
+const EXPECTED_CONTENT_FIELDS = [
+  "id",
+  "title",
+  "authors",
+  "details",
+  "motivation",
+  "license",
+];
 
-  const proposal = props.maybeProposal.value;
-  const { onClose } = props;
+export const ProposalDetails = (props: ProposalDetailsProps): JSX.Element => {
+  const { onClose, maybeProposal } = props;
 
   const { chainId } = useAppSelector<SettingsState>((state) => state.settings);
   const { derived } = useAppSelector<AccountsState>((state) => state.accounts);
@@ -73,9 +78,14 @@ export const ProposalDetails = (props: ProposalDetailsProps): JSX.Element => {
       const integration = getIntegration(chainId);
       const signer = integration.signer() as Signer;
 
+      if (O.isNone(maybeProposal)) {
+        throw new Error("No proposal");
+      }
+
       if (O.isNone(activeDelegator)) {
         throw new Error("No active delegator");
       }
+      const proposal = maybeProposal.value;
 
       await signer.submitVoteProposal(
         {
@@ -93,11 +103,11 @@ export const ProposalDetails = (props: ProposalDetailsProps): JSX.Element => {
         AccountType.Mnemonic
       );
     },
-    [activeDelegator, proposal]
+    [activeDelegator, maybeProposal]
   );
 
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchData = async (proposal: Proposal): Promise<void> => {
       try {
         const votes = await query.get_proposal_votes(BigInt(proposal.id));
         setActiveProposalVotes(new Map(votes));
@@ -113,30 +123,90 @@ export const ProposalDetails = (props: ProposalDetailsProps): JSX.Element => {
       }
     };
 
-    if (addresses.length > 0) {
-      fetchData();
+    if (addresses.length > 0 && O.isSome(maybeProposal)) {
+      fetchData(maybeProposal.value);
     }
-  }, [JSON.stringify(addresses)]);
+  }, [JSON.stringify(addresses), maybeProposal]);
 
-  if (O.isSome(activeDelegator) && O.isSome(delegators)) {
+  if (
+    O.isSome(activeDelegator) &&
+    O.isSome(delegators) &&
+    O.isSome(maybeProposal)
+  ) {
     const delegatorAddress = activeDelegator.value;
     const delegations = delegators.value;
+    const { id, content, status, result } = maybeProposal.value;
+    const { title, authors, details, motivation, license } = content;
+
+    const unexpectedFields = Object.entries(content).filter(
+      ([k]) => !EXPECTED_CONTENT_FIELDS.includes(k)
+    );
 
     return (
       <ProposalDetailsContainer open={open} onClick={onContainerClick}>
         <ProposalDetailsContent>
-          <h1>
-            #{proposal.id} {proposal.content.title}
-          </h1>
-          <p>by: {proposal.content.authors}</p>
-          <h3>Details:</h3>
-          <p>{proposal.content.details}</p>
-          <h3>Motivation:</h3>
-          <p>{proposal.content.motivation}</p>
-          <h3>License:</h3>
-          <p>{proposal.content.license}</p>
-
-          {proposal.status === "on-going" && !proposal.result && (
+          {/* main header */}
+          <ProposalDetailsContentMainHeader>
+            #{id} {title}
+          </ProposalDetailsContentMainHeader>
+
+          {/* authors */}
+          {authors && (
+            <ProposalDetailsContentParagraph>
+              by: {authors}
+            </ProposalDetailsContentParagraph>
+          )}
+
+          {/* details */}
+          {details && (
+            <>
+              <ProposalDetailsContentSubHeader>
+                Details:
+              </ProposalDetailsContentSubHeader>
+              <ProposalDetailsContentParagraph>
+                {details}
+              </ProposalDetailsContentParagraph>
+            </>
+          )}
+
+          {/* motivation */}
+          {motivation && (
+            <>
+              <ProposalDetailsContentSubHeader>
+                Motivation:
+              </ProposalDetailsContentSubHeader>
+              <ProposalDetailsContentParagraph>
+                {motivation}
+              </ProposalDetailsContentParagraph>
+            </>
+          )}
+
+          {/* license */}
+          {license && (
+            <>
+              <ProposalDetailsContentSubHeader>
+                License:
+              </ProposalDetailsContentSubHeader>
+              <ProposalDetailsContentParagraph>
+                {license}
+              </ProposalDetailsContentParagraph>
+            </>
+          )}
+          {unexpectedFields.map(([k, v]) => (
+            <>
+              <ProposalDetailsContentSubHeader>
+                {k}:
+              </ProposalDetailsContentSubHeader>
+              <ProposalDetailsContentParagraph>
+                {v}
+              </ProposalDetailsContentParagraph>
+            </>
+          ))}
+
+          {/* status */}
+
+          {/* voting section */}
+          {status === "on-going" && !result && (
             <>
               <ProposalDetailsAddresses>
                 <ProposalDetailsAddressesHeader>
@@ -185,6 +255,6 @@ export const ProposalDetails = (props: ProposalDetailsProps): JSX.Element => {
       </ProposalDetailsContainer>
     );
   } else {
-    return <AppLoader />;
+    return <></>;
   }
 };

apps/namada-interface/src/App/Governance/types.ts

@@ -0,0 +1,16 @@
+import BigNumber from "bignumber.js";
+
+// TODO: move types to @namada/types
+export type Proposal = {
+  id: string;
+  proposalType: string;
+  author: string;
+  startEpoch: bigint;
+  endEpoch: bigint;
+  graceEpoch: bigint;
+  content: Partial<{ [key: string]: string }>;
+  status: string;
+  yesVotes?: BigNumber;
+  totalVotingPower?: BigNumber;
+  result?: string;
+};

apps/namada-interface/src/slices/index.ts

@@ -3,6 +3,5 @@ export { default as transfersReducer } from "./transfers";
 export { default as channelsReducer } from "./channels";
 export { default as settingsReducer } from "./settings";
 export { default as coinsReducer } from "./coins";
-export { default as proposalsReducer } from "./proposals";
 export { notificationsReducer } from "./notifications";
 export { stakingAndGovernanceReducers } from "./StakingAndGovernance";

apps/namada-interface/src/store/mocks.ts

@@ -146,7 +146,4 @@ export const mockAppState: RootState = {
     toasts: {},
     pendingActions: [],
   },
-  proposals: {
-    proposals: [],
-  },
 };