[#257 #374] Display GA using data from BE

govtool/frontend/src/components/molecules/GovernanceActionCard.tsx

@@ -27,13 +27,11 @@ type ActionTypeProps = Omit<
   | "abstainVotes"
   | "metadataHash"
   | "url"
-  | "details"
   | "id"
-  | "txHash"
-  | "index"
+  | "details"
+  | "rationale"
+  | "motivation"
 > & {
-  txHash: string;
-  index: number;
   isDataMissing: boolean;
   onClick?: () => void;
   inProgress?: boolean;
@@ -44,11 +42,15 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
     type,
     inProgress = false,
     expiryDate,
+    expiryEpochNo,
     onClick,
     createdDate,
+    createdEpochNo,
     txHash,
     index,
     isDataMissing,
+    title,
+    about,
   } = props;
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
@@ -85,13 +87,14 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         }}
       >
         <GovernanceActionCardHeader
-          // TODO: Add real title from props when BE is ready
-          title="Fund our project"
+          // TODO: Remove "Fund our project" when title is implemented everywhere
+          title={title ?? "Fund our project"}
           isDataMissing={isDataMissing}
         />
         <GovernanceActionCardElement
           label={t("govActions.abstract")}
-          text={mockedLongText}
+          // TODO: Remove mock when possible
+          text={about ?? mockedLongText}
           textVariant="twoLines"
           dataTestId="governance-action-abstract"
           isSliderCard
@@ -106,6 +109,8 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         <GovernanceActionsDatesBox
           createdDate={formatDisplayDate(createdDate)}
           expiryDate={formatDisplayDate(expiryDate)}
+          expiryEpochNo={expiryEpochNo}
+          createdEpochNo={createdEpochNo}
           isSliderCard
         />
         <GovernanceActionCardElement

govtool/frontend/src/components/molecules/GovernanceActionDetailsCardOnChainData.tsx

@@ -4,10 +4,7 @@ import { Typography } from "@atoms";
 import { useTranslation } from "@hooks";
 
 type GovernanceActionDetailsCardOnChainDataProps = {
-  data: {
-    label: string;
-    content: string;
-  }[];
+  data: ActionDetailsType;
 };
 
 export const GovernanceActionDetailsCardOnChainData = ({
@@ -38,7 +35,7 @@ export const GovernanceActionDetailsCardOnChainData = ({
           {t("govActions.onChainTransactionDetails")}
         </Typography>
       </Box>
-      {data.map(({ label, content }) => (
+      {Object.entries(data).map(([label, content]) => (
         <Box
           key={label}
           sx={{
@@ -53,8 +50,6 @@ export const GovernanceActionDetailsCardOnChainData = ({
               fontWeight: 600,
               lineHeight: "24px",
               whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
             }}
           >
             {label}:

govtool/frontend/src/components/molecules/GovernanceActionsDatesBox.tsx

@@ -8,12 +8,16 @@ import { useScreenDimension, useTranslation } from "@hooks";
 type GovernanceActionsDatesBoxProps = {
   createdDate: string;
   expiryDate: string;
+  expiryEpochNo: number;
+  createdEpochNo: number;
   isSliderCard?: boolean;
 };
 
 export const GovernanceActionsDatesBox = ({
   createdDate,
   expiryDate,
+  expiryEpochNo,
+  createdEpochNo,
   isSliderCard,
 }: GovernanceActionsDatesBoxProps) => {
   const { t } = useTranslation();
@@ -54,8 +58,7 @@ export const GovernanceActionsDatesBox = ({
         >
           <Trans
             i18nKey="govActions.submittedDateWithEpoch"
-            // TODO: Add proper epoch
-            values={{ date: createdDate, epoch: "430" }}
+            values={{ date: createdDate, epoch: createdEpochNo }}
             components={[
               <span style={{ fontWeight: 600 }} key="0" />,
               <span style={{ fontWeight: 400 }} key="1" />,
@@ -97,8 +100,7 @@ export const GovernanceActionsDatesBox = ({
         >
           <Trans
             i18nKey="govActions.expiresDateWithEpoch"
-            // TODO: Add proper epoch
-            values={{ date: expiryDate, epoch: "440" }}
+            values={{ date: expiryDate, epoch: expiryEpochNo }}
             components={[
               <span style={{ fontWeight: 600 }} key="0" />,
               <span style={{ fontWeight: 400 }} key="1" />,

govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx

@@ -35,6 +35,17 @@ export const GovernanceVotedOnCard = ({
 }: Props) => {
   const navigate = useNavigate();
   const { proposal, vote } = votedProposal;
+  const {
+    createdDate,
+    createdEpochNo,
+    expiryDate,
+    expiryEpochNo,
+    type,
+    txHash,
+    index,
+    title,
+    about,
+  } = proposal;
 
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
@@ -60,9 +71,7 @@ export const GovernanceVotedOnCard = ({
           ? "1px solid #F6D5D5"
           : "1px solid #C0E4BA",
       }}
-      data-testid={`govaction-${getProposalTypeNoEmptySpaces(
-        proposal.type,
-      )}-card`}
+      data-testid={`govaction-${getProposalTypeNoEmptySpaces(type)}-card`}
     >
       <GovernanceActionCardStatePill
         variant={inProgress ? "inProgress" : "voteSubmitted"}
@@ -73,36 +82,36 @@ export const GovernanceVotedOnCard = ({
         }}
       >
         <GovernanceActionCardHeader
-          // TODO: Add real title from props when BE is ready
-          title="Fund our project"
+          // TODO: Remove "Fund our project" when title is implemented everywhere
+          title={title ?? "Fund our project"}
           isDataMissing={isDataMissing}
         />
         <GovernanceActionCardElement
           label={t("govActions.abstract")}
-          text={mockedLongText}
+          // TODO: Remove mock when possible
+          text={about ?? mockedLongText}
           textVariant="twoLines"
           dataTestId="governance-action-abstract"
           isSliderCard
         />
         <GovernanceActionCardElement
           label={t("govActions.governanceActionType")}
-          text={getProposalTypeLabel(proposal.type)}
+          text={getProposalTypeLabel(type)}
           textVariant="pill"
-          dataTestId={`${getProposalTypeNoEmptySpaces(proposal.type)}-type`}
+          dataTestId={`${getProposalTypeNoEmptySpaces(type)}-type`}
           isSliderCard
         />
         <GovernanceActionsDatesBox
-          createdDate={formatDisplayDate(proposal.createdDate)}
-          expiryDate={formatDisplayDate(proposal.expiryDate)}
+          createdDate={formatDisplayDate(createdDate)}
+          expiryDate={formatDisplayDate(expiryDate)}
+          expiryEpochNo={expiryEpochNo}
+          createdEpochNo={createdEpochNo}
           isSliderCard
         />
         <GovernanceActionCardElement
           label={t("govActions.governanceActionId")}
-          text={getFullGovActionId(proposal.txHash, proposal.index)}
-          dataTestId={`${getFullGovActionId(
-            proposal.txHash,
-            proposal.index,
-          )}-id`}
+          text={getFullGovActionId(txHash, index)}
+          dataTestId={`${getFullGovActionId(txHash, index)}-id`}
           isCopyButton
           isSliderCard
         />
@@ -121,14 +130,14 @@ export const GovernanceVotedOnCard = ({
         <Button
           disabled={inProgress}
           data-testid={`govaction-${getFullGovActionId(
-            proposal.txHash,
-            proposal.index,
+            txHash,
+            index,
           )}-change-your-vote`}
           onClick={() =>
             navigate(
               PATHS.dashboardGovernanceActionsAction.replace(
                 ":proposalId",
-                getFullGovActionId(proposal.txHash, proposal.index),
+                getFullGovActionId(txHash, index),
               ),
               {
                 state: {

govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx

@@ -41,6 +41,7 @@ export const DashboardGovernanceActionDetails = () => {
     state ? state.txHash : data?.proposal.txHash ?? "",
     state ? state.index : data?.proposal.index ?? "",
   );
+  const title = state ? state.title : data?.proposal.title;
 
   return (
     <Box
@@ -54,7 +55,8 @@ export const DashboardGovernanceActionDetails = () => {
       <Breadcrumbs
         elementOne={t("govActions.title")}
         elementOnePath={PATHS.dashboardGovernanceActions}
-        elementTwo="Fund our project"
+        // TODO: Remove "Fund our project" when title is implemented everywhere
+        elementTwo={title ?? "Fund our project"}
         isDataMissing={false}
       />
       <Link
@@ -108,13 +110,19 @@ export const DashboardGovernanceActionDetails = () => {
                 ? formatDisplayDate(state.createdDate)
                 : formatDisplayDate(data.proposal.createdDate)
             }
+            createdEpochNo={
+              state ? state.createdEpochNo : data.proposal.createdEpochNo
+            }
             // TODO: Add data validation
             isDataMissing={isDataMissing}
             expiryDate={
               state
                 ? formatDisplayDate(state.expiryDate)
                 : formatDisplayDate(data.proposal.expiryDate)
             }
+            expiryEpochNo={
+              state ? state.expiryEpochNo : data.proposal.expiryEpochNo
+            }
             isVoter={
               voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter
             }
@@ -124,8 +132,12 @@ export const DashboardGovernanceActionDetails = () => {
                 ? getProposalTypeLabel(state.type)
                 : getProposalTypeLabel(data.proposal.type)
             }
-            // TODO: To decide if we want to keep it when metadate BE is ready
-            // url={state ? state.url : data.proposal.url}
+            details={state ? state.details : data.proposal.details}
+            url={state ? state.url : data.proposal.url}
+            title={state ? state.title : data.proposal.title}
+            about={state ? state.about : data.proposal.about}
+            motivation={state ? state.motivation : data.proposal.motivation}
+            rationale={state ? state.rationale : data.proposal.rationale}
             yesVotes={state ? state.yesVotes : data.proposal.yesVotes}
             voteFromEP={data?.vote?.vote}
             govActionId={fullProposalId}

govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx

@@ -10,10 +10,17 @@ import { useState } from "react";
 type GovernanceActionDetailsCardProps = {
   abstainVotes: number;
   createdDate: string;
+  createdEpochNo: number;
   expiryDate: string;
+  expiryEpochNo: number;
   noVotes: number;
   type: string;
-  // url: string;
+  details?: ActionDetailsType;
+  url: string;
+  title: string | null;
+  about: string | null;
+  motivation: string | null;
+  rationale: string | null;
   yesVotes: number;
   govActionId: string;
   isDataMissing: boolean;
@@ -26,10 +33,17 @@ type GovernanceActionDetailsCardProps = {
 export const GovernanceActionDetailsCard = ({
   abstainVotes,
   createdDate,
+  createdEpochNo,
   expiryDate,
+  expiryEpochNo,
   noVotes,
   type,
-  // url,
+  details,
+  url,
+  title,
+  about,
+  motivation,
+  rationale,
   yesVotes,
   isDashboard,
   isVoter,
@@ -72,7 +86,15 @@ export const GovernanceActionDetailsCard = ({
         type={type}
         govActionId={govActionId}
         createdDate={createdDate}
+        createdEpochNo={createdEpochNo}
         expiryDate={expiryDate}
+        expiryEpochNo={expiryEpochNo}
+        details={details}
+        url={url}
+        title={title}
+        about={about}
+        motivation={motivation}
+        rationale={rationale}
         isDataMissing={isDataMissing}
         isDashboard={isDashboard}
         isOneColumn={isOneColumn}