chore/add-supported-links

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

@@ -1,66 +1,64 @@
 import { Box } from "@mui/material";
 
 import { Typography } from "@atoms";
+import { ICONS } from "@consts";
+import { useModal } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { LinkWithIcon } from "@molecules";
-import { ICONS } from "@/consts";
-import { useModal } from "@/context";
 
-// TODO: When BE is ready, pass links as props
-const LINKS = [
-  "https://docs.sanchogov.tools/support/get-help-in-discord",
-  "https://docs.sanchogov.tools/how-to-use-the-govtool/prerequsites",
-  "https://docs.sanchogov.tools/faqs",
-  "https://docs.sanchogov.tools/",
-];
-
-export const GovernanceActionDetailsCardLinks = () => {
+export const GovernanceActionDetailsCardLinks = ({
+  links,
+}: {
+  links?: string[];
+}) => {
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
   const { openModal } = useModal();
 
   return (
-    <>
-      <Typography
-        sx={{
-          fontSize: 14,
-          fontWeight: 600,
-          lineHeight: "20px",
-          color: "neutralGray",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          mb: 2,
-        }}
-        data-testid="supporting-links"
-      >
-        {t("govActions.supportingLinks")}
-      </Typography>
-      <Box
-        sx={{
-          display: "grid",
-          gridTemplateColumns: isMobile ? undefined : "1fr 1fr",
-          columnGap: 2,
-          rowGap: 2,
-        }}
-      >
-        {LINKS.map((link) => (
-          <LinkWithIcon
-            key={link}
-            label={link}
-            onClick={() => {
-              openModal({
-                type: "externalLink",
-                state: {
-                  externalLink: link,
-                },
-              });
-            }}
-            icon={<img alt="link" src={ICONS.link} />}
-            cutWithEllipsis
-          />
-        ))}
-      </Box>
-    </>
+    links && (
+      <>
+        <Typography
+          sx={{
+            fontSize: 14,
+            fontWeight: 600,
+            lineHeight: "20px",
+            color: "neutralGray",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            mb: 2,
+          }}
+          data-testid="supporting-links"
+        >
+          {t("govActions.supportingLinks")}
+        </Typography>
+        <Box
+          sx={{
+            display: "grid",
+            gridTemplateColumns: isMobile ? undefined : "1fr 1fr",
+            columnGap: 2,
+            rowGap: 2,
+          }}
+        >
+          {links.map((link) => (
+            <LinkWithIcon
+              key={link}
+              label={link}
+              onClick={() => {
+                openModal({
+                  type: "externalLink",
+                  state: {
+                    externalLink: link,
+                  },
+                });
+              }}
+              icon={<img alt="link" src={ICONS.link} />}
+              cutWithEllipsis
+            />
+          ))}
+        </Box>
+      </>
+    )
   );
 };

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

@@ -132,6 +132,7 @@ export const DashboardGovernanceActionDetails = () => {
             details={state ? state.details : data.proposal.details}
             url={state ? state.url : data.proposal.url}
             title={state ? state.title : data.proposal.title}
+            links={state ? state.references : data.proposal.references}
             about={state ? state.about : data.proposal.about}
             motivation={state ? state.motivation : data.proposal.motivation}
             rationale={state ? state.rationale : data.proposal.rationale}

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

@@ -24,6 +24,7 @@ type GovernanceActionDetailsCardProps = {
   motivation?: string;
   rationale?: string;
   yesVotes: number;
+  links?: string[];
   govActionId: string;
   isDataMissing: boolean | MetadataValidationStatus;
   isDashboard?: boolean;
@@ -46,6 +47,7 @@ export const GovernanceActionDetailsCard = ({
   details,
   url,
   title,
+  links,
   about,
   motivation,
   rationale,
@@ -91,23 +93,24 @@ export const GovernanceActionDetailsCard = ({
         />
       )}
       <GovernanceActionDetailsCardData
-        type={type}
-        govActionId={govActionId}
+        about={about}
         createdDate={createdDate}
         createdEpochNo={createdEpochNo}
+        details={details}
         expiryDate={expiryDate}
         expiryEpochNo={expiryEpochNo}
-        details={details}
-        url={url}
-        title={title}
-        about={about}
-        motivation={motivation}
-        rationale={rationale}
-        isDataMissing={isDataMissing}
+        govActionId={govActionId}
         isDashboard={isDashboard}
-        isOneColumn={isOneColumn}
+        isDataMissing={isDataMissing}
         isInProgress={isInProgress}
+        isOneColumn={isOneColumn}
         isSubmitted={isVoteSubmitted}
+        links={links}
+        motivation={motivation}
+        rationale={rationale}
+        title={title}
+        type={type}
+        url={url}
       />
       <GovernanceActionDetailsCardVotes
         setIsVoteSubmitted={setIsVoteSubmitted}

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

@@ -14,43 +14,45 @@ import { getProposalTypeNoEmptySpaces } from "@utils";
 import { MetadataValidationStatus } from "@models";
 
 type GovernanceActionDetailsCardDataProps = {
-  type: string;
-  govActionId: string;
+  about?: string;
   createdDate: string;
   createdEpochNo: number;
+  details?: ActionDetailsType;
   expiryDate: string;
   expiryEpochNo: number;
-  details?: ActionDetailsType;
-  url: string;
-  title?: string;
-  about?: string;
-  motivation?: string;
-  rationale?: string;
-  isDataMissing: boolean | MetadataValidationStatus;
-  isOneColumn: boolean;
+  govActionId: string;
   isDashboard?: boolean;
+  isDataMissing: boolean | MetadataValidationStatus;
   isInProgress?: boolean;
+  isOneColumn: boolean;
   isSubmitted?: boolean;
+  links?: string[];
+  motivation?: string;
+  rationale?: string;
+  title?: string;
+  type: string;
+  url: string;
 };
 
 export const GovernanceActionDetailsCardData = ({
-  type,
-  govActionId,
+  about,
   createdDate,
   createdEpochNo,
+  details,
   expiryDate,
   expiryEpochNo,
-  details,
-  url,
-  title,
-  about,
-  motivation,
-  rationale,
-  isDataMissing,
-  isOneColumn,
+  govActionId,
   isDashboard,
+  isDataMissing,
   isInProgress,
+  isOneColumn,
   isSubmitted,
+  links,
+  motivation,
+  rationale,
+  title,
+  type,
+  url,
 }: GovernanceActionDetailsCardDataProps) => {
   const { t } = useTranslation();
   const { screenWidth } = useScreenDimension();
@@ -121,7 +123,7 @@ export const GovernanceActionDetailsCardData = ({
       {details && Object.keys(details).length !== 0 && (
         <GovernanceActionDetailsCardOnChainData data={details} />
       )}
-      <GovernanceActionDetailsCardLinks />
+      <GovernanceActionDetailsCardLinks links={links} />
     </Box>
   );
 };

govtool/frontend/src/services/requests/getProposal.ts

@@ -13,5 +13,9 @@ export const getProposal = async (proposalId: string, drepId?: string) => {
     url: data?.proposal.url,
   });
   // workaround for the missing data in db-sync
-  return { ...data, ...metadata, isDataMissing: status || false };
+  return {
+    ...data,
+    proposal: { ...data.proposal, ...metadata },
+    isDataMissing: status || false,
+  };
 };