feat: display proposal description from ipfs

tupui · Nov 14, 2024 · 51b220b · 51b220b
1 parent d76ba2d
commit 51b220b
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 8 deletions.
diff --git a/dapp/src/components/page/proposal/ProposalDetail.tsx b/dapp/src/components/page/proposal/ProposalDetail.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import Markdown from "markdown-to-jsx";
+import "github-markdown-css";
 
 interface ProposalDetailProps {
   description: string;
@@ -17,7 +19,9 @@ const ProposalDetail: React.FC<ProposalDetailProps> = ({
             Proposal Description
           </div>
           <div className="w-full mt-4 sm:mt-5 md:mt-7 min-h-24 sm:min-h-32">
-            <div>{description}</div>
+            <div className="markdown-body w-full px-4 sm:px-6 md:px-8 py-6">
+              <Markdown>{description}</Markdown>
+            </div>
           </div>
         </div>
         <div className="">

diff --git a/dapp/src/components/page/proposal/ProposalPage.tsx b/dapp/src/components/page/proposal/ProposalPage.tsx
@@ -9,10 +9,12 @@ import { proposalId } from "utils/store";
 import type { VoteType, VoteStatus } from "types/proposal";
 import { demoProposalData } from "constants/demoProposalData";
 import ProposalDetail from "./ProposalDetail";
+import { fetchProposalFromIPFS } from "@service/ProposalService";
 
 const ProposalPage: React.FC = () => {
   const id = useStore(proposalId);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [description, setDescription] = useState("");
   const [voteType, setVoteType] = useState<VoteType>();
   const [voteStatus, setVoteStatus] = useState<VoteStatus>();
 
@@ -21,13 +23,20 @@ const ProposalPage: React.FC = () => {
     setIsModalOpen(true);
   };
 
-  const getVoteStatus = () => {
+  const getProposalDetails = async () => {
     const proposal = demoProposalData[0];
-    setVoteStatus(proposal && proposal.voteStatus);
+    if (proposal) {
+      setVoteStatus(proposal.voteStatus);
+      const description = await fetchProposalFromIPFS(proposal.ipfsLink);
+      console.log("description:", description);
+      setDescription(description);
+    } else {
+      alert("Proposal not found");
+    }
   };
 
   useEffect(() => {
-    getVoteStatus();
+    getProposalDetails();
   }, [id]);
 
   return (
@@ -45,7 +54,7 @@ const ProposalPage: React.FC = () => {
           abstain={20}
           onClick={(voteType) => openVotersModal(voteType)}
         />
-        <ProposalDetail description="" outcome="" />
+        <ProposalDetail description={description} outcome="" />
       </div>
       {isModalOpen && voteStatus && (
         <VotersModal

diff --git a/dapp/src/components/utils/PrimaryButton.astro b/dapp/src/components/utils/PrimaryButton.astro
@@ -21,11 +21,13 @@ const {
 <div id={wrapId}>
   <button
     id={buttonId}
-    class={`w-full px-4 py-2 sm:py-3 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex ${buttonClass}`}
+    class={`w-full px-2 sm:px-4 py-1.5 sm:py-3 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex ${buttonClass}`}
     aria-controls={ariaControls}
     {...dataAttr && { [dataAttr]: "" }}
   >
-    <span class="text-center text-white text-xl font-normal leading-7">
+    <span
+      class="text-center text-white text-base sm:text-xl font-normal leading-7"
+    >
       {buttonText}
     </span>
   </button>

diff --git a/dapp/src/constants/demoProposalData.ts b/dapp/src/constants/demoProposalData.ts
@@ -67,7 +67,10 @@ export const demoProposalData: Proposal[] = [
   {
     id: 1,
     title: "Issue Bounty: Add DAO system to the project - $3000",
-    description: "This is next step of Tansu Project.",
+    ipfsLink:
+      "https://bafybeidsfg2rfmpgtisfnmk6lur5dmy6j4kwjblh2rhme6nrsvjcaci4jq.ipfs.w3s.link/",
+    description:
+      "https://bafybeidsfg2rfmpgtisfnmk6lur5dmy6j4kwjblh2rhme6nrsvjcaci4jq.ipfs.w3s.link/proposal.md",
     outcome: "",
     status: "active",
     voteStatus: {

diff --git a/dapp/src/service/ProposalService.ts b/dapp/src/service/ProposalService.ts
@@ -0,0 +1,20 @@
+import axios from "axios";
+
+async function fetchProposalFromIPFS(url: string) {
+  try {
+    const response = await axios.get(
+      url.endsWith("/") ? `${url}proposal.md` : `${url}/proposal.md`,
+    );
+    let content = response.data;
+    content = content.replace(
+      /!\[([^\]]*)\]\(([^http][^)]+)\)/g,
+      `![$1](${url}$2)`,
+    );
+    return content;
+  } catch (error) {
+    console.error("Error fetching the IPFS file:", error);
+    throw error;
+  }
+}
+
+export { fetchProposalFromIPFS };
diff --git a/dapp/src/types/proposal.ts b/dapp/src/types/proposal.ts
@@ -3,6 +3,7 @@ export type ProposalStatus = "active" | "rejected" | "cancelled" | "approved";
 export interface Proposal {
   id: number;
   title: string;
+  ipfsLink: string;
   description: string;
   outcome: string;
   status: ProposalStatus;