From a2e6e2a0a2e15497f49311bb10121feffb628f80 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Fri, 22 Nov 2024 16:15:36 +0900
Subject: [PATCH 01/19] feat: create new proposal page

---
 dapp/package.json                             |   1 +
 .../page/governance/GovernancePageTitle.astro |  11 +
 .../page/governance/NewProposalPage.astro     |  13 +
 .../governance/NewProposalPageTitle.astro     |   9 +
 .../page/governance/ProposalForm.tsx          | 291 ++++++++++++++++++
 dapp/src/pages/proposal/new.astro             |  23 ++
 6 files changed, 348 insertions(+)
 create mode 100644 dapp/src/components/page/governance/NewProposalPage.astro
 create mode 100644 dapp/src/components/page/governance/NewProposalPageTitle.astro
 create mode 100644 dapp/src/components/page/governance/ProposalForm.tsx
 create mode 100644 dapp/src/pages/proposal/new.astro

diff --git a/dapp/package.json b/dapp/package.json
index a324df54..dc6e8b18 100644
--- a/dapp/package.json
+++ b/dapp/package.json
@@ -5,6 +5,7 @@
     "@astrojs/tailwind": "5.1.2",
     "@creit.tech/sorobandomains-sdk": "^0.1.4",
     "@creit.tech/stellar-wallets-kit": "^1.2.5",
+    "@mdxeditor/editor": "^3.19.2",
     "@nanostores/react": "^0.8.0",
     "@stellar/stellar-sdk": "^13.0.0",
     "astro": "4.16.13",
diff --git a/dapp/src/components/page/governance/GovernancePageTitle.astro b/dapp/src/components/page/governance/GovernancePageTitle.astro
index 85833b88..cfda9728 100644
--- a/dapp/src/components/page/governance/GovernancePageTitle.astro
+++ b/dapp/src/components/page/governance/GovernancePageTitle.astro
@@ -18,6 +18,7 @@ import Topic from "../../utils/Topic.astro";
 </div>
 
 <script>
+  import { navigate } from "astro:transitions/client";
   import { projectNameForGovernance } from "utils/store";
   import { capitalizeFirstLetter } from "utils/utils";
 
@@ -32,5 +33,15 @@ import Topic from "../../utils/Topic.astro";
         }
       }
     });
+
+    const submitProposalButton = document.getElementById(
+      "wrap-create-proposal-button",
+    );
+
+    if (submitProposalButton) {
+      submitProposalButton.addEventListener("click", () => {
+        navigate(`/proposal/new`);
+      });
+    }
   });
 </script>
diff --git a/dapp/src/components/page/governance/NewProposalPage.astro b/dapp/src/components/page/governance/NewProposalPage.astro
new file mode 100644
index 00000000..c8aa7706
--- /dev/null
+++ b/dapp/src/components/page/governance/NewProposalPage.astro
@@ -0,0 +1,13 @@
+---
+import ProposalForm from "./ProposalForm";
+---
+
+<div
+  class="relative flex flex-col items-center lg:flex-row my-6 bg-zinc-100 rounded-[45px]"
+>
+  <div
+    class="row items-center py-12 px-4 sm:px-12 md:px-20 md:py-10 w-full lg:max-w-none"
+  >
+    <ProposalForm client:load />
+  </div>
+</div>
diff --git a/dapp/src/components/page/governance/NewProposalPageTitle.astro b/dapp/src/components/page/governance/NewProposalPageTitle.astro
new file mode 100644
index 00000000..7ccfaf4c
--- /dev/null
+++ b/dapp/src/components/page/governance/NewProposalPageTitle.astro
@@ -0,0 +1,9 @@
+---
+import Topic from "components/utils/Topic.astro";
+---
+
+<div
+  class="relative flex flex-col items-center md:flex-row justify-between mb-1.5 mt-4 sm:mt-8 md:mt-12 gap-y-4"
+>
+  <Topic title="Create Proposal" description="" id="new-proposal-topic" />
+</div>
diff --git a/dapp/src/components/page/governance/ProposalForm.tsx b/dapp/src/components/page/governance/ProposalForm.tsx
new file mode 100644
index 00000000..06a03f04
--- /dev/null
+++ b/dapp/src/components/page/governance/ProposalForm.tsx
@@ -0,0 +1,291 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import {
+  MDXEditor,
+  headingsPlugin,
+  listsPlugin,
+  quotePlugin,
+  thematicBreakPlugin,
+  markdownShortcutPlugin,
+  linkPlugin,
+  linkDialogPlugin,
+  imagePlugin,
+  tablePlugin,
+  codeBlockPlugin,
+  codeMirrorPlugin,
+  diffSourcePlugin,
+  frontmatterPlugin,
+  toolbarPlugin,
+  Separator,
+  UndoRedo,
+  BoldItalicUnderlineToggles,
+  BlockTypeSelect,
+  CodeToggle,
+  CreateLink,
+  DiffSourceToggleWrapper,
+  InsertAdmonition,
+  InsertImage,
+  InsertTable,
+  InsertFrontmatter,
+  InsertThematicBreak,
+  InsertCodeBlock,
+  ListsToggle,
+  type CodeBlockEditorDescriptor,
+  useCodeBlockEditorContext,
+} from "@mdxeditor/editor";
+import "@mdxeditor/editor/style.css";
+import { capitalizeFirstLetter } from "utils/utils";
+import type { ProposalOutcome } from "types/proposal";
+
+const ProposalForm: React.FC = () => {
+  const [mdText, setMdText] = useState("");
+  const [isClient, setIsClient] = useState(false);
+  const [approveDescription, setApproveDescription] = useState("");
+  const [rejectDescription, setRejectDescription] = useState("");
+  const [cancelledDescription, setCancelledDescription] = useState("");
+  const [approveXdr, setApproveXdr] = useState("");
+  const [rejectXdr, setRejectXdr] = useState("");
+  const [cancelledXdr, setCancelledXdr] = useState("");
+  const [imageFiles, setImageFiles] = useState<
+    { localUrl: string; publicUrl: string; source: File }[]
+  >([]);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
+  const imageUploadHandler = async (image: File) => {
+    const url = URL.createObjectURL(image);
+    setImageFiles([
+      ...imageFiles,
+      { localUrl: url, publicUrl: image.name, source: image },
+    ]);
+    console.log("imageUrl:", imageFiles);
+    return url;
+  };
+
+  const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = {
+    match: (language, meta) => true,
+    priority: 0,
+    Editor: (props) => {
+      const cb = useCodeBlockEditorContext();
+      return (
+        <div onKeyDown={(e) => e.nativeEvent.stopImmediatePropagation()}>
+          <textarea
+            rows={5}
+            cols={20}
+            defaultValue={props.code}
+            onChange={(e) => cb.setCode(e.target.value)}
+          />
+        </div>
+      );
+    },
+  };
+
+  const submitProposal = () => {
+    const proposalOutcome: ProposalOutcome = {
+      approved: {
+        description: approveDescription,
+        xdr: approveXdr,
+      },
+      rejected: {
+        description: rejectDescription,
+        xdr: rejectXdr,
+      },
+      cancelled: {
+        description: cancelledDescription,
+        xdr: cancelledXdr,
+      },
+    };
+    const outcome = new Blob([JSON.stringify(proposalOutcome)], {
+      type: "application/json",
+    });
+
+    let files = [new File([outcome], "outcomes.json")];
+    let description = mdText;
+
+    imageFiles.forEach((image) => {
+      if (description.includes(image.localUrl)) {
+        description = description.replace(
+          new RegExp(image.localUrl, "g"),
+          image.publicUrl,
+        );
+        files.push(new File([image.source], image.publicUrl));
+      }
+    });
+
+    files.push(new File([description], "proposal.md"));
+    alert("Proposal submitted successfully!");
+  };
+
+  return (
+    <div>
+      <h3 className="text-base sm:text-lg md:text-2xl font-semibold py-2">
+        Proposal Description
+      </h3>
+      <div className="rounded-md border border-zinc-700 overflow-hidden">
+        <MDXEditor
+          plugins={[
+            markdownShortcutPlugin(),
+            headingsPlugin(),
+            listsPlugin(),
+            quotePlugin(),
+            thematicBreakPlugin(),
+            linkPlugin(),
+            linkDialogPlugin(),
+            imagePlugin({
+              imageUploadHandler,
+            }),
+            tablePlugin(),
+            codeBlockPlugin({
+              defaultCodeBlockLanguage: "ts",
+              codeBlockEditorDescriptors: [PlainTextCodeEditorDescriptor],
+            }),
+            codeMirrorPlugin({
+              codeBlockLanguages: {
+                js: "JavaScript",
+                css: "CSS",
+                rust: "Rust",
+                html: "HTML",
+                json: "JSON",
+                ts: "TypeScript",
+              },
+            }),
+            diffSourcePlugin({
+              diffMarkdown: "boo",
+            }),
+            frontmatterPlugin(),
+            toolbarPlugin({
+              toolbarClassName: "my-classname",
+              toolbarContents: () => (
+                <>
+                  <UndoRedo />
+                  <Separator />
+                  <BoldItalicUnderlineToggles />
+                  <CodeToggle />
+                  <BlockTypeSelect />
+                  <Separator />
+                  <ListsToggle />
+                  <Separator />
+                  <CreateLink />
+                  <InsertImage />
+                  <InsertTable />
+                  <Separator />
+                  <InsertAdmonition />
+                  <InsertThematicBreak />
+                  <InsertCodeBlock />
+                  <Separator />
+                  <InsertFrontmatter />
+                  <DiffSourceToggleWrapper>
+                    <div></div>
+                  </DiffSourceToggleWrapper>
+                  <BoldItalicUnderlineToggles />
+                </>
+              ),
+            }),
+          ]}
+          markdown={mdText}
+          onChange={(value) => setMdText(value || "")}
+          placeholder="Input your proposal description here..."
+        />
+      </div>
+      <h3 className="text-base sm:text-lg md:text-2xl font-semibold py-2">
+        Proposal Outcome
+      </h3>
+      <div className="w-full max-w-[840px] mx-auto flex flex-col gap-4 sm:gap-6 md:gap-10">
+        <OutcomeInput
+          type="approved"
+          description={approveDescription}
+          setDescription={setApproveDescription}
+          xdr={approveXdr}
+          setXdr={setApproveXdr}
+        />
+        <OutcomeInput
+          type="rejected"
+          description={rejectDescription}
+          setDescription={setRejectDescription}
+          xdr={rejectXdr}
+          setXdr={setRejectXdr}
+        />
+        <OutcomeInput
+          type="cancelled"
+          description={cancelledDescription}
+          setDescription={setCancelledDescription}
+          xdr={cancelledXdr}
+          setXdr={setCancelledXdr}
+        />
+        <div className="ml-[80px] sm:ml-[90px] md:ml-[105px]">
+          <button
+            className="w-full py-5 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex"
+            onClick={() => submitProposal()}
+          >
+            <span className="text-center text-white text-xl font-normal leading-7">
+              Submit Proposal
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProposalForm;
+
+interface OutcomeInputProps {
+  type: string;
+  description: string;
+  setDescription: React.Dispatch<React.SetStateAction<string>>;
+  xdr: string;
+  setXdr: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const OutcomeInput = ({
+  type,
+  description,
+  setDescription,
+  xdr,
+  setXdr,
+}: OutcomeInputProps) => {
+  return (
+    <div className="flex flex-col gap-2 sm:gap-3 md:gap-4">
+      <div className="w-min">
+        <div
+          className={`text-sm sm:text-base md:text-lg text-white md:py-0.5 px-1 md:px-2 rounded-sm md:rounded 
+            ${type === "approved" ? "bg-approved" : type === "rejected" ? "bg-conflict" : type === "cancelled" && "bg-abstain"}`}
+        >
+          {capitalizeFirstLetter(type)}
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 sm:gap-4 md:gap-6">
+        <div className="flex items-start">
+          <div className="w-[80px] sm:w-[90px] md:w-[105px] pr-1.5 flex justify-end">
+            <div className="text-sm sm:text-base">Description:</div>
+          </div>
+          <textarea
+            value={description}
+            onChange={(e) => {
+              setDescription(e.target.value);
+            }}
+            className="w-[calc(100%-80px)] sm:w-[calc(100%-90px)] md:w-[calc(100%-105px)] h-max text-sm sm:text-base rounded-md border border-zinc-700 outline-none resize-y"
+          />
+        </div>
+        <div className="flex items-start">
+          <div className="w-[80px] sm:w-[90px] md:w-[105px] pr-1.5 flex justify-end">
+            <div className="text-sm sm:text-base">XDR:</div>
+          </div>
+          <textarea
+            value={xdr}
+            onChange={(e) => {
+              setXdr(e.target.value);
+            }}
+            className="w-[calc(100%-80px)] sm:w-[calc(100%-90px)] md:w-[calc(100%-105px)] h-max text-sm sm:text-base rounded-md border border-zinc-700 outline-none resize-y"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/dapp/src/pages/proposal/new.astro b/dapp/src/pages/proposal/new.astro
new file mode 100644
index 00000000..354977db
--- /dev/null
+++ b/dapp/src/pages/proposal/new.astro
@@ -0,0 +1,23 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Container from "../../components/layout/Container.astro";
+import NewProposalPageTitle from "components/page/governance/NewProposalPageTitle.astro";
+import NewProposalPage from "components/page/governance/NewProposalPage.astro";
+---
+
+<script is:inline>
+  var global = global || window;
+</script>
+
+<Layout title="Tansu">
+  <main class="space-y-20">
+    <Container>
+      <NewProposalPageTitle />
+      <NewProposalPage />
+    </Container>
+  </main>
+</Layout>
+
+<script>
+  document.addEventListener("astro:page-load", async () => {});
+</script>

From e3cb3d3f66dae3940a2bbdd65910ee4a502b511e Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Fri, 22 Nov 2024 16:27:40 +0900
Subject: [PATCH 02/19] chore: add invalid option to commit badge

---
 dapp/src/components/page/project/ProjectInfo.astro | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/dapp/src/components/page/project/ProjectInfo.astro b/dapp/src/components/page/project/ProjectInfo.astro
index 37130013..e2526615 100644
--- a/dapp/src/components/page/project/ProjectInfo.astro
+++ b/dapp/src/components/page/project/ProjectInfo.astro
@@ -628,6 +628,12 @@ import DonateModal from "./DonateModal.astro";
                 commitPopup.innerHTML =
                   '<p class="text-sm w-36 sm:w-max">Latest SHA on-chain cannot be found on GitHub</p>';
               }
+            } else {
+              commitComponent.classList.add("bg-orange-200");
+              commitIcon.src = "/icons/failed.svg";
+              commitIcon.alt = "Failed";
+              commitPopup.innerHTML =
+                '<p class="text-sm w-36 sm:w-max">Latest SHA on-chain cannot be found on GitHub</p>';
             }
           } catch (error) {
             commitComponent.classList.add("bg-orange-200");

From 362ba1a260f8cd731c6d08274f1f45943151f942 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Fri, 22 Nov 2024 16:34:09 +0900
Subject: [PATCH 03/19] chore: add console log to test get project hash

---
 dapp/src/pages/project/index.astro | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/dapp/src/pages/project/index.astro b/dapp/src/pages/project/index.astro
index c1839be6..8c2dfbf5 100644
--- a/dapp/src/pages/project/index.astro
+++ b/dapp/src/pages/project/index.astro
@@ -64,6 +64,8 @@ import ProjectReadme from "../../components/page/project/ProjectReadme.astro";
         }
 
         const latestSha = await getProjectHash();
+        console.log("latestSha:", latestSha);
+        
         if (
           typeof latestSha === "string" &&
           latestSha.match(/^[a-f0-9]{40}$/)

From 5d6e348bedbc1322ed49efd2446b598b935ed92b Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Fri, 22 Nov 2024 16:37:01 +0900
Subject: [PATCH 04/19] fix: linter error

---
 dapp/src/pages/project/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/src/pages/project/index.astro b/dapp/src/pages/project/index.astro
index 8c2dfbf5..218e8984 100644
--- a/dapp/src/pages/project/index.astro
+++ b/dapp/src/pages/project/index.astro
@@ -65,7 +65,7 @@ import ProjectReadme from "../../components/page/project/ProjectReadme.astro";
 
         const latestSha = await getProjectHash();
         console.log("latestSha:", latestSha);
-        
+
         if (
           typeof latestSha === "string" &&
           latestSha.match(/^[a-f0-9]{40}$/)

From 46bf3d5ebb7cb609e302a379c57c9ba41bbb6f40 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Tue, 26 Nov 2024 20:57:57 +0900
Subject: [PATCH 05/19] feat: store proposal in IPFS

---
 dapp/.env.example                             |  3 +
 dapp/astro.config.mjs                         |  1 +
 dapp/package.json                             |  1 +
 .../page/governance/ProposalForm.tsx          | 50 +++++++++++++---
 dapp/src/components/utils/Loading.tsx         | 20 +++++++
 dapp/src/env.d.ts                             |  2 +
 dapp/src/pages/api/w3up-delegation.js         | 57 +++++++++++++++++++
 7 files changed, 127 insertions(+), 7 deletions(-)
 create mode 100644 dapp/src/components/utils/Loading.tsx
 create mode 100644 dapp/src/pages/api/w3up-delegation.js

diff --git a/dapp/.env.example b/dapp/.env.example
index 754595d5..91e8e3dd 100644
--- a/dapp/.env.example
+++ b/dapp/.env.example
@@ -10,3 +10,6 @@ SOROBAN_NETWORK="testnet | public"
 
 PUBLIC_DEFAULT_FEE="100"
 PUBLIC_DEFAULT_TIMEOUT=30
+
+PUBLIC_STORACHA_SING_PRIVATE_KEY=""
+PUBLIC_STORACHA_PROOF=""
\ No newline at end of file
diff --git a/dapp/astro.config.mjs b/dapp/astro.config.mjs
index 8817ae42..cda7a487 100644
--- a/dapp/astro.config.mjs
+++ b/dapp/astro.config.mjs
@@ -5,4 +5,5 @@ import tailwind from "@astrojs/tailwind";
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind()],
+  output: "hybrid",
 });
diff --git a/dapp/package.json b/dapp/package.json
index bfaa7681..82f40621 100644
--- a/dapp/package.json
+++ b/dapp/package.json
@@ -9,6 +9,7 @@
     "@nanostores/react": "^0.8.0",
     "@stellar/stellar-sdk": "^13.0.0",
     "astro": "4.16.14",
+    "@web3-storage/w3up-client": "^16.5.1",
     "astro-seo": "^0.8.4",
     "github-markdown-css": "^5.8.0",
     "install": "^0.13.0",
diff --git a/dapp/src/components/page/governance/ProposalForm.tsx b/dapp/src/components/page/governance/ProposalForm.tsx
index 06a03f04..4ca8377e 100644
--- a/dapp/src/components/page/governance/ProposalForm.tsx
+++ b/dapp/src/components/page/governance/ProposalForm.tsx
@@ -34,10 +34,14 @@ import {
   useCodeBlockEditorContext,
 } from "@mdxeditor/editor";
 import "@mdxeditor/editor/style.css";
-import { capitalizeFirstLetter } from "utils/utils";
+import * as Delegation from "@web3-storage/w3up-client/delegation";
+import * as Client from "@web3-storage/w3up-client";
+import { capitalizeFirstLetter, getIpfsBasicLink } from "utils/utils";
 import type { ProposalOutcome } from "types/proposal";
+import Loading from "components/utils/Loading";
 
 const ProposalForm: React.FC = () => {
+  const [isLoading, setIsLoading] = useState(false);
   const [mdText, setMdText] = useState("");
   const [isClient, setIsClient] = useState(false);
   const [approveDescription, setApproveDescription] = useState("");
@@ -69,7 +73,7 @@ const ProposalForm: React.FC = () => {
   };
 
   const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = {
-    match: (language, meta) => true,
+    match: (_language, _meta) => true,
     priority: 0,
     Editor: (props) => {
       const cb = useCodeBlockEditorContext();
@@ -86,7 +90,28 @@ const ProposalForm: React.FC = () => {
     },
   };
 
-  const submitProposal = () => {
+  const submitProposal = async () => {
+    setIsLoading(true);
+    const client = await Client.create();
+    const apiUrl = `/api/w3up-delegation`;
+
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ did: client.agent.did() }),
+    });
+    const data = await response.arrayBuffer();
+
+    const delegation = await Delegation.extract(new Uint8Array(data));
+    if (!delegation.ok) {
+      throw new Error("Failed to extract delegation", {
+        cause: delegation.error,
+      });
+    }
+
+    const space = await client.addSpace(delegation.ok);
+    client.setCurrentSpace(space.did());
+
     const proposalOutcome: ProposalOutcome = {
       approved: {
         description: approveDescription,
@@ -101,6 +126,7 @@ const ProposalForm: React.FC = () => {
         xdr: cancelledXdr,
       },
     };
+
     const outcome = new Blob([JSON.stringify(proposalOutcome)], {
       type: "application/json",
     });
@@ -119,7 +145,13 @@ const ProposalForm: React.FC = () => {
     });
 
     files.push(new File([description], "proposal.md"));
-    alert("Proposal submitted successfully!");
+
+    const directoryCid = await client.uploadDirectory(files);
+
+    setIsLoading(false);
+    alert(
+      `Proposal submitted successfully! CID: ${getIpfsBasicLink(directoryCid.toString())}`,
+    );
   };
 
   return (
@@ -223,9 +255,13 @@ const ProposalForm: React.FC = () => {
             className="w-full py-5 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex"
             onClick={() => submitProposal()}
           >
-            <span className="text-center text-white text-xl font-normal leading-7">
-              Submit Proposal
-            </span>
+            {isLoading ? (
+              <Loading theme="dark" />
+            ) : (
+              <span className="text-center text-white text-xl font-normal leading-7">
+                Submit Proposal
+              </span>
+            )}
           </button>
         </div>
       </div>
diff --git a/dapp/src/components/utils/Loading.tsx b/dapp/src/components/utils/Loading.tsx
new file mode 100644
index 00000000..7b7a6159
--- /dev/null
+++ b/dapp/src/components/utils/Loading.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const Loading = ({ theme = "light" }: { theme?: "dark" | "light" }) => {
+  const bgColor = theme === "dark" ? "bg-white" : "bg-black";
+
+  return (
+    <div className="flex space-y-4 space-x-2 justify-center items-center dark:invert">
+      <span className="sr-only">Loading...</span>
+      <div
+        className={`h-8 w-8 ${bgColor} rounded-full animate-bounce [animation-delay:-0.3s]`}
+      ></div>
+      <div
+        className={`h-8 w-8 ${bgColor} rounded-full animate-bounce [animation-delay:-0.15s]`}
+      ></div>
+      <div className={`h-8 w-8 ${bgColor} rounded-full animate-bounce`}></div>
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/dapp/src/env.d.ts b/dapp/src/env.d.ts
index 925c4c07..1b7b6876 100644
--- a/dapp/src/env.d.ts
+++ b/dapp/src/env.d.ts
@@ -11,6 +11,8 @@ interface ImportMetaEnv {
   readonly SOROBAN_NETWORK: string;
   readonly PUBLIC_DEFAULT_FEE: string;
   readonly PUBLIC_DEFAULT_TIMEOUT: number;
+  readonly PUBLIC_STORACHA_SING_PRIVATE_KEY: string;
+  readonly PUBLIC_STORACHA_PROOF: string;
 }
 
 interface ImportMeta {
diff --git a/dapp/src/pages/api/w3up-delegation.js b/dapp/src/pages/api/w3up-delegation.js
new file mode 100644
index 00000000..241b381f
--- /dev/null
+++ b/dapp/src/pages/api/w3up-delegation.js
@@ -0,0 +1,57 @@
+// /src/pages/api/w3up-delegation/[did].js
+import * as Client from "@web3-storage/w3up-client";
+import { StoreMemory } from "@web3-storage/w3up-client/stores/memory";
+import * as Proof from "@web3-storage/w3up-client/proof";
+import { Signer } from "@web3-storage/w3up-client/principal/ed25519";
+import * as DID from "@ipld/dag-ucan/did";
+
+export const prerender = false;
+
+export const POST = async ({ request }) => {
+  if (request.headers.get("Content-Type") === "application/json") {
+    const body = await request.json();
+    const { did } = body;
+    try {
+      const archive = await backend(did);
+
+      return new Response(archive, {
+        status: 200,
+        headers: { "Content-Type": "application/octet-stream" },
+      });
+    } catch (err) {
+      console.error("Error creating delegation:", err);
+      return new Response(JSON.stringify({ error: "Internal Server Error" }), {
+        status: 500,
+      });
+    }
+  }
+  return new Response(null, { status: 400 });
+};
+
+async function backend(did) {
+  const key = import.meta.env.PUBLIC_STORACHA_SING_PRIVATE_KEY;
+  const storachaProof = import.meta.env.PUBLIC_STORACHA_PROOF;
+
+  const principal = Signer.parse(key);
+  const store = new StoreMemory();
+  const client = await Client.create({ principal, store });
+
+  const proof = await Proof.parse(storachaProof);
+  const space = await client.addSpace(proof);
+  await client.setCurrentSpace(space.did());
+
+  const audience = DID.parse(did);
+  const abilities = [
+    "space/blob/add",
+    "space/index/add",
+    "filecoin/offer",
+    "upload/add",
+  ];
+  const expiration = Math.floor(Date.now() / 1000) + 60 * 60 * 24;
+  const delegation = await client.createDelegation(audience, abilities, {
+    expiration,
+  });
+
+  const archive = await delegation.archive();
+  return archive.ok;
+}

From 6058039d87a96bc2fa58fa0a3fa59f41b8e779cc Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Tue, 26 Nov 2024 21:06:12 +0900
Subject: [PATCH 06/19] chore: set netlify adapter

---
 dapp/astro.config.mjs | 2 ++
 dapp/package.json     | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/dapp/astro.config.mjs b/dapp/astro.config.mjs
index cda7a487..64d57f6c 100644
--- a/dapp/astro.config.mjs
+++ b/dapp/astro.config.mjs
@@ -1,9 +1,11 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
+import netlify from "@astrojs/netlify";
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind()],
   output: "hybrid",
+  adapter: netlify(),
 });
diff --git a/dapp/package.json b/dapp/package.json
index 82f40621..6780781a 100644
--- a/dapp/package.json
+++ b/dapp/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/netlify": "^5.5.4",
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "5.1.2",
     "@creit.tech/sorobandomains-sdk": "^0.1.4",
@@ -8,8 +9,8 @@
     "@mdxeditor/editor": "^3.19.2",
     "@nanostores/react": "^0.8.0",
     "@stellar/stellar-sdk": "^13.0.0",
-    "astro": "4.16.14",
     "@web3-storage/w3up-client": "^16.5.1",
+    "astro": "4.16.14",
     "astro-seo": "^0.8.4",
     "github-markdown-css": "^5.8.0",
     "install": "^0.13.0",

From 24062abc0f3129b4a4fd3e771590c580c7d6c2a2 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Tue, 26 Nov 2024 21:10:13 +0900
Subject: [PATCH 07/19] chore: remove unnecessary logs

---
 dapp/src/components/page/dashboard/ProjectList.jsx   | 1 -
 dapp/src/components/page/governance/ProposalForm.tsx | 1 -
 dapp/src/components/page/project/ProjectInfo.astro   | 1 -
 dapp/src/pages/project/index.astro                   | 2 --
 dapp/src/pages/proposal/index.astro                  | 1 -
 5 files changed, 6 deletions(-)

diff --git a/dapp/src/components/page/dashboard/ProjectList.jsx b/dapp/src/components/page/dashboard/ProjectList.jsx
index 3021751d..25204d06 100644
--- a/dapp/src/components/page/dashboard/ProjectList.jsx
+++ b/dapp/src/components/page/dashboard/ProjectList.jsx
@@ -90,7 +90,6 @@ const ProjectList = () => {
   };
 
   const checkProjectOnChain = async (projectName) => {
-    console.log("search:", projectName);
     setIsLoading(true);
     try {
       const project = await getProjectFromName(projectName);
diff --git a/dapp/src/components/page/governance/ProposalForm.tsx b/dapp/src/components/page/governance/ProposalForm.tsx
index 4ca8377e..ce537460 100644
--- a/dapp/src/components/page/governance/ProposalForm.tsx
+++ b/dapp/src/components/page/governance/ProposalForm.tsx
@@ -68,7 +68,6 @@ const ProposalForm: React.FC = () => {
       ...imageFiles,
       { localUrl: url, publicUrl: image.name, source: image },
     ]);
-    console.log("imageUrl:", imageFiles);
     return url;
   };
 
diff --git a/dapp/src/components/page/project/ProjectInfo.astro b/dapp/src/components/page/project/ProjectInfo.astro
index e2526615..9682185a 100644
--- a/dapp/src/components/page/project/ProjectInfo.astro
+++ b/dapp/src/components/page/project/ProjectInfo.astro
@@ -724,7 +724,6 @@ import DonateModal from "./DonateModal.astro";
     ) as HTMLButtonElement;
     if (button) {
       button.addEventListener("click", async () => {
-        console.log("Update config button clicked");
         modal.showModal();
       });
     }
diff --git a/dapp/src/pages/project/index.astro b/dapp/src/pages/project/index.astro
index 218e8984..9d9f19b6 100644
--- a/dapp/src/pages/project/index.astro
+++ b/dapp/src/pages/project/index.astro
@@ -44,7 +44,6 @@ import ProjectReadme from "../../components/page/project/ProjectReadme.astro";
   document.addEventListener("astro:page-load", async () => {
     const urlParams = new URLSearchParams(window.location.search);
     const projectName = urlParams.get("name") || "";
-    console.log("projectName:", projectName);
     if (projectName) {
       console.log("project info loading...");
       setProjectId(projectName);
@@ -64,7 +63,6 @@ import ProjectReadme from "../../components/page/project/ProjectReadme.astro";
         }
 
         const latestSha = await getProjectHash();
-        console.log("latestSha:", latestSha);
 
         if (
           typeof latestSha === "string" &&
diff --git a/dapp/src/pages/proposal/index.astro b/dapp/src/pages/proposal/index.astro
index 989c49c5..d85ccb41 100644
--- a/dapp/src/pages/proposal/index.astro
+++ b/dapp/src/pages/proposal/index.astro
@@ -24,7 +24,6 @@ import ProposalPage from "../../components/page/proposal/ProposalPage.tsx";
     const id = urlParams.get("id") || "";
     if (id) {
       proposalId.set(Number(id));
-      console.log("id:", id);
     }
   });
 </script>

From 17b52db1d2cd90cada9be73d7f3379bb170d196b Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Thu, 28 Nov 2024 01:22:43 +0900
Subject: [PATCH 08/19] chore: change server side to client side for uploading
 to storacha

---
 dapp/astro.config.mjs                         |  3 -
 dapp/package.json                             |  1 -
 .../page/governance/ProposalForm.tsx          | 30 ++++------
 dapp/src/pages/api/w3up-delegation.js         | 57 -------------------
 4 files changed, 12 insertions(+), 79 deletions(-)
 delete mode 100644 dapp/src/pages/api/w3up-delegation.js

diff --git a/dapp/astro.config.mjs b/dapp/astro.config.mjs
index 64d57f6c..8817ae42 100644
--- a/dapp/astro.config.mjs
+++ b/dapp/astro.config.mjs
@@ -1,11 +1,8 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
-import netlify from "@astrojs/netlify";
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind()],
-  output: "hybrid",
-  adapter: netlify(),
 });
diff --git a/dapp/package.json b/dapp/package.json
index 6780781a..a402a1bd 100644
--- a/dapp/package.json
+++ b/dapp/package.json
@@ -1,7 +1,6 @@
 {
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/netlify": "^5.5.4",
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "5.1.2",
     "@creit.tech/sorobandomains-sdk": "^0.1.4",
diff --git a/dapp/src/components/page/governance/ProposalForm.tsx b/dapp/src/components/page/governance/ProposalForm.tsx
index ce537460..385d511a 100644
--- a/dapp/src/components/page/governance/ProposalForm.tsx
+++ b/dapp/src/components/page/governance/ProposalForm.tsx
@@ -34,8 +34,10 @@ import {
   useCodeBlockEditorContext,
 } from "@mdxeditor/editor";
 import "@mdxeditor/editor/style.css";
-import * as Delegation from "@web3-storage/w3up-client/delegation";
 import * as Client from "@web3-storage/w3up-client";
+import { StoreMemory } from "@web3-storage/w3up-client/stores/memory";
+import * as Proof from "@web3-storage/w3up-client/proof";
+import { Signer } from "@web3-storage/w3up-client/principal/ed25519";
 import { capitalizeFirstLetter, getIpfsBasicLink } from "utils/utils";
 import type { ProposalOutcome } from "types/proposal";
 import Loading from "components/utils/Loading";
@@ -91,25 +93,16 @@ const ProposalForm: React.FC = () => {
 
   const submitProposal = async () => {
     setIsLoading(true);
-    const client = await Client.create();
-    const apiUrl = `/api/w3up-delegation`;
 
-    const response = await fetch(apiUrl, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ did: client.agent.did() }),
-    });
-    const data = await response.arrayBuffer();
-
-    const delegation = await Delegation.extract(new Uint8Array(data));
-    if (!delegation.ok) {
-      throw new Error("Failed to extract delegation", {
-        cause: delegation.error,
-      });
-    }
+    const key = import.meta.env.PUBLIC_STORACHA_SING_PRIVATE_KEY;
+    const storachaProof = import.meta.env.PUBLIC_STORACHA_PROOF;
 
-    const space = await client.addSpace(delegation.ok);
-    client.setCurrentSpace(space.did());
+    const principal = Signer.parse(key);
+    const store = new StoreMemory();
+    const client = await Client.create({ principal, store });
+    const proof = await Proof.parse(storachaProof);
+    const space = await client.addSpace(proof);
+    await client.setCurrentSpace(space.did());
 
     const proposalOutcome: ProposalOutcome = {
       approved: {
@@ -145,6 +138,7 @@ const ProposalForm: React.FC = () => {
 
     files.push(new File([description], "proposal.md"));
 
+    console.log("proposal uploading...");
     const directoryCid = await client.uploadDirectory(files);
 
     setIsLoading(false);
diff --git a/dapp/src/pages/api/w3up-delegation.js b/dapp/src/pages/api/w3up-delegation.js
deleted file mode 100644
index 241b381f..00000000
--- a/dapp/src/pages/api/w3up-delegation.js
+++ /dev/null
@@ -1,57 +0,0 @@
-// /src/pages/api/w3up-delegation/[did].js
-import * as Client from "@web3-storage/w3up-client";
-import { StoreMemory } from "@web3-storage/w3up-client/stores/memory";
-import * as Proof from "@web3-storage/w3up-client/proof";
-import { Signer } from "@web3-storage/w3up-client/principal/ed25519";
-import * as DID from "@ipld/dag-ucan/did";
-
-export const prerender = false;
-
-export const POST = async ({ request }) => {
-  if (request.headers.get("Content-Type") === "application/json") {
-    const body = await request.json();
-    const { did } = body;
-    try {
-      const archive = await backend(did);
-
-      return new Response(archive, {
-        status: 200,
-        headers: { "Content-Type": "application/octet-stream" },
-      });
-    } catch (err) {
-      console.error("Error creating delegation:", err);
-      return new Response(JSON.stringify({ error: "Internal Server Error" }), {
-        status: 500,
-      });
-    }
-  }
-  return new Response(null, { status: 400 });
-};
-
-async function backend(did) {
-  const key = import.meta.env.PUBLIC_STORACHA_SING_PRIVATE_KEY;
-  const storachaProof = import.meta.env.PUBLIC_STORACHA_PROOF;
-
-  const principal = Signer.parse(key);
-  const store = new StoreMemory();
-  const client = await Client.create({ principal, store });
-
-  const proof = await Proof.parse(storachaProof);
-  const space = await client.addSpace(proof);
-  await client.setCurrentSpace(space.did());
-
-  const audience = DID.parse(did);
-  const abilities = [
-    "space/blob/add",
-    "space/index/add",
-    "filecoin/offer",
-    "upload/add",
-  ];
-  const expiration = Math.floor(Date.now() / 1000) + 60 * 60 * 24;
-  const delegation = await client.createDelegation(audience, abilities, {
-    expiration,
-  });
-
-  const archive = await delegation.archive();
-  return archive.ok;
-}

From 7a2e76573d7bb5b860bd7865ba7fc5964bb58724 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Sat, 30 Nov 2024 12:38:19 +0900
Subject: [PATCH 09/19] Revert "chore: change server side to client side for
 uploading to storacha"

This reverts commit 17b52db1d2cd90cada9be73d7f3379bb170d196b.
---
 dapp/astro.config.mjs                         |  3 +
 dapp/package.json                             |  1 +
 .../page/governance/ProposalForm.tsx          | 30 ++++++----
 dapp/src/pages/api/w3up-delegation.js         | 57 +++++++++++++++++++
 4 files changed, 79 insertions(+), 12 deletions(-)
 create mode 100644 dapp/src/pages/api/w3up-delegation.js

diff --git a/dapp/astro.config.mjs b/dapp/astro.config.mjs
index 8817ae42..64d57f6c 100644
--- a/dapp/astro.config.mjs
+++ b/dapp/astro.config.mjs
@@ -1,8 +1,11 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
+import netlify from "@astrojs/netlify";
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind()],
+  output: "hybrid",
+  adapter: netlify(),
 });
diff --git a/dapp/package.json b/dapp/package.json
index a402a1bd..6780781a 100644
--- a/dapp/package.json
+++ b/dapp/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/netlify": "^5.5.4",
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "5.1.2",
     "@creit.tech/sorobandomains-sdk": "^0.1.4",
diff --git a/dapp/src/components/page/governance/ProposalForm.tsx b/dapp/src/components/page/governance/ProposalForm.tsx
index 385d511a..ce537460 100644
--- a/dapp/src/components/page/governance/ProposalForm.tsx
+++ b/dapp/src/components/page/governance/ProposalForm.tsx
@@ -34,10 +34,8 @@ import {
   useCodeBlockEditorContext,
 } from "@mdxeditor/editor";
 import "@mdxeditor/editor/style.css";
+import * as Delegation from "@web3-storage/w3up-client/delegation";
 import * as Client from "@web3-storage/w3up-client";
-import { StoreMemory } from "@web3-storage/w3up-client/stores/memory";
-import * as Proof from "@web3-storage/w3up-client/proof";
-import { Signer } from "@web3-storage/w3up-client/principal/ed25519";
 import { capitalizeFirstLetter, getIpfsBasicLink } from "utils/utils";
 import type { ProposalOutcome } from "types/proposal";
 import Loading from "components/utils/Loading";
@@ -93,16 +91,25 @@ const ProposalForm: React.FC = () => {
 
   const submitProposal = async () => {
     setIsLoading(true);
+    const client = await Client.create();
+    const apiUrl = `/api/w3up-delegation`;
 
-    const key = import.meta.env.PUBLIC_STORACHA_SING_PRIVATE_KEY;
-    const storachaProof = import.meta.env.PUBLIC_STORACHA_PROOF;
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ did: client.agent.did() }),
+    });
+    const data = await response.arrayBuffer();
+
+    const delegation = await Delegation.extract(new Uint8Array(data));
+    if (!delegation.ok) {
+      throw new Error("Failed to extract delegation", {
+        cause: delegation.error,
+      });
+    }
 
-    const principal = Signer.parse(key);
-    const store = new StoreMemory();
-    const client = await Client.create({ principal, store });
-    const proof = await Proof.parse(storachaProof);
-    const space = await client.addSpace(proof);
-    await client.setCurrentSpace(space.did());
+    const space = await client.addSpace(delegation.ok);
+    client.setCurrentSpace(space.did());
 
     const proposalOutcome: ProposalOutcome = {
       approved: {
@@ -138,7 +145,6 @@ const ProposalForm: React.FC = () => {
 
     files.push(new File([description], "proposal.md"));
 
-    console.log("proposal uploading...");
     const directoryCid = await client.uploadDirectory(files);
 
     setIsLoading(false);
diff --git a/dapp/src/pages/api/w3up-delegation.js b/dapp/src/pages/api/w3up-delegation.js
new file mode 100644
index 00000000..241b381f
--- /dev/null
+++ b/dapp/src/pages/api/w3up-delegation.js
@@ -0,0 +1,57 @@
+// /src/pages/api/w3up-delegation/[did].js
+import * as Client from "@web3-storage/w3up-client";
+import { StoreMemory } from "@web3-storage/w3up-client/stores/memory";
+import * as Proof from "@web3-storage/w3up-client/proof";
+import { Signer } from "@web3-storage/w3up-client/principal/ed25519";
+import * as DID from "@ipld/dag-ucan/did";
+
+export const prerender = false;
+
+export const POST = async ({ request }) => {
+  if (request.headers.get("Content-Type") === "application/json") {
+    const body = await request.json();
+    const { did } = body;
+    try {
+      const archive = await backend(did);
+
+      return new Response(archive, {
+        status: 200,
+        headers: { "Content-Type": "application/octet-stream" },
+      });
+    } catch (err) {
+      console.error("Error creating delegation:", err);
+      return new Response(JSON.stringify({ error: "Internal Server Error" }), {
+        status: 500,
+      });
+    }
+  }
+  return new Response(null, { status: 400 });
+};
+
+async function backend(did) {
+  const key = import.meta.env.PUBLIC_STORACHA_SING_PRIVATE_KEY;
+  const storachaProof = import.meta.env.PUBLIC_STORACHA_PROOF;
+
+  const principal = Signer.parse(key);
+  const store = new StoreMemory();
+  const client = await Client.create({ principal, store });
+
+  const proof = await Proof.parse(storachaProof);
+  const space = await client.addSpace(proof);
+  await client.setCurrentSpace(space.did());
+
+  const audience = DID.parse(did);
+  const abilities = [
+    "space/blob/add",
+    "space/index/add",
+    "filecoin/offer",
+    "upload/add",
+  ];
+  const expiration = Math.floor(Date.now() / 1000) + 60 * 60 * 24;
+  const delegation = await client.createDelegation(audience, abilities, {
+    expiration,
+  });
+
+  const archive = await delegation.archive();
+  return archive.ok;
+}

From ff12773173131e51516857422736faa37037477a Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Sun, 1 Dec 2024 23:09:51 +0900
Subject: [PATCH 10/19] chore: add query params to proposal page

---
 .../page/governance/GovernancePageTitle.astro | 14 +++++++----
 .../page/governance/ProposalCard.tsx          | 12 +++++++---
 .../page/governance/ProposalList.tsx          | 23 ++++++++++++-------
 .../components/page/proposal/ProposalPage.tsx | 11 +++++++--
 dapp/src/pages/governance/index.astro         |  1 -
 dapp/src/pages/proposal/index.astro           |  6 ++++-
 dapp/src/pages/proposal/new.astro             | 12 +++++++++-
 7 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/dapp/src/components/page/governance/GovernancePageTitle.astro b/dapp/src/components/page/governance/GovernancePageTitle.astro
index cfda9728..a923cf60 100644
--- a/dapp/src/components/page/governance/GovernancePageTitle.astro
+++ b/dapp/src/components/page/governance/GovernancePageTitle.astro
@@ -23,14 +23,16 @@ import Topic from "../../utils/Topic.astro";
   import { capitalizeFirstLetter } from "utils/utils";
 
   document.addEventListener("astro:page-load", async () => {
-    projectNameForGovernance.subscribe((projectName) => {
-      if (projectName) {
+    let projectName = "";
+    projectNameForGovernance.subscribe((_projectName) => {
+      if (_projectName) {
         const titleElement = document
           .getElementById("proposal-page-topic")
           ?.querySelector("span");
         if (titleElement) {
-          titleElement.textContent = `${capitalizeFirstLetter(projectName)} Governance`;
+          titleElement.textContent = `${capitalizeFirstLetter(_projectName)} Governance`;
         }
+        projectName = _projectName;
       }
     });
 
@@ -40,7 +42,11 @@ import Topic from "../../utils/Topic.astro";
 
     if (submitProposalButton) {
       submitProposalButton.addEventListener("click", () => {
-        navigate(`/proposal/new`);
+        if (projectName) {
+          navigate(`/proposal/new?name=${projectName}`);
+        } else {
+          alert("Project name is not provided");
+        }
       });
     }
   });
diff --git a/dapp/src/components/page/governance/ProposalCard.tsx b/dapp/src/components/page/governance/ProposalCard.tsx
index f1c310d9..cd12d572 100644
--- a/dapp/src/components/page/governance/ProposalCard.tsx
+++ b/dapp/src/components/page/governance/ProposalCard.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import ProposalStatusShow from "./ProposalStatusShow";
-import type { ProposalCardView } from "types/proposal";
-import { calculateDateDifference } from "utils/formatTimeFunctions";
 import { navigate } from "astro:transitions/client";
+import { useStore } from "@nanostores/react";
+import { calculateDateDifference } from "utils/formatTimeFunctions";
+import { projectNameForGovernance } from "utils/store";
+import type { ProposalCardView } from "types/proposal";
 
 const ProposalCard: React.FC<ProposalCardView> = ({
   proposalNumber,
@@ -10,10 +12,14 @@ const ProposalCard: React.FC<ProposalCardView> = ({
   proposalStatus,
   endDate,
 }) => {
+  const projectName = useStore(projectNameForGovernance);
+
   return (
     <div
       className="w-full px-2 sm:px-4 md:pl-8 py-2 sm:py-3 md:py-4.5 bg-white border border-zinc-300 rounded-lg sm:rounded-xl cursor-pointer hover:border-lime hover:bg-zinc-500"
-      onClick={() => navigate(`/proposal?id=${proposalNumber}`)}
+      onClick={() =>
+        navigate(`/proposal?id=${proposalNumber}&&name=${projectName}`)
+      }
     >
       <div className="w-full flex justify-between items-center">
         <div className="lg:max-w-[calc(100%-240px)] flex items-start gap-2">
diff --git a/dapp/src/components/page/governance/ProposalList.tsx b/dapp/src/components/page/governance/ProposalList.tsx
index 3a0087b6..1c2ad448 100644
--- a/dapp/src/components/page/governance/ProposalList.tsx
+++ b/dapp/src/components/page/governance/ProposalList.tsx
@@ -14,16 +14,23 @@ const ProposalList: React.FC = () => {
   const [proposalData, setProposalData] = useState<ProposalView[]>([]);
 
   const fetchProposalData = async (_page: number) => {
-    const updatedProposalData = demoProposalData.map((proposal) => {
-      const proposalStatusView = modifyProposalStatusToView(
-        proposal.status,
-        proposal.endDate,
-      );
+    if (projectName) {
+      const updatedProposalData = demoProposalData.map((proposal) => {
+        const proposalStatusView = modifyProposalStatusToView(
+          proposal.status,
+          proposal.endDate,
+        );
 
-      return { ...proposal, status: proposalStatusView as ProposalViewStatus };
-    });
+        return {
+          ...proposal,
+          status: proposalStatusView as ProposalViewStatus,
+        };
+      });
 
-    setProposalData(updatedProposalData);
+      setProposalData(updatedProposalData);
+    } else {
+      alert("Project name is not provided");
+    }
   };
 
   useEffect(() => {
diff --git a/dapp/src/components/page/proposal/ProposalPage.tsx b/dapp/src/components/page/proposal/ProposalPage.tsx
index 71274d05..faa1c993 100644
--- a/dapp/src/components/page/proposal/ProposalPage.tsx
+++ b/dapp/src/components/page/proposal/ProposalPage.tsx
@@ -9,7 +9,11 @@ import VotersModal from "./VotersModal";
 import VotingModal from "./VotingModal";
 import ExecuteProposalModal from "./ExecuteProposalModal";
 import { modifyProposalStatusToView } from "utils/utils";
-import { connectedPublicKey, proposalId } from "utils/store";
+import {
+  connectedPublicKey,
+  projectNameForGovernance,
+  proposalId,
+} from "utils/store";
 import { demoProposalData } from "constants/demoProposalData";
 import {
   fetchOutcomeDataFromIPFS,
@@ -24,6 +28,7 @@ import type {
 
 const ProposalPage: React.FC = () => {
   const id = useStore(proposalId);
+  const projectName = useStore(projectNameForGovernance);
   const connectedAddress = useStore(connectedPublicKey);
   const [isVotersModalOpen, setIsVotersModalOpen] = useState(false);
   const [isVotingModalOpen, setIsVotingModalOpen] = useState(false);
@@ -61,7 +66,7 @@ const ProposalPage: React.FC = () => {
     }
   };
   const getProposalDetails = async () => {
-    if (id) {
+    if (id && projectName) {
       const proposal = demoProposalData.find((p) => p.id === id);
       if (proposal) {
         const proposalStatusView = modifyProposalStatusToView(
@@ -80,6 +85,8 @@ const ProposalPage: React.FC = () => {
       } else {
         alert("Proposal not found");
       }
+    } else {
+      alert("Project name or proposal id is not provided");
     }
   };
 
diff --git a/dapp/src/pages/governance/index.astro b/dapp/src/pages/governance/index.astro
index 229fa38b..f5b6fd1c 100644
--- a/dapp/src/pages/governance/index.astro
+++ b/dapp/src/pages/governance/index.astro
@@ -24,7 +24,6 @@ import GovernancePage from "../../components/page/governance/GovernancePage.astr
     const projectName = urlParams.get("name") || "";
     if (projectName) {
       projectNameForGovernance.set(projectName);
-      console.log("projectName:", projectName);
     }
   });
 </script>
diff --git a/dapp/src/pages/proposal/index.astro b/dapp/src/pages/proposal/index.astro
index d85ccb41..57befdbc 100644
--- a/dapp/src/pages/proposal/index.astro
+++ b/dapp/src/pages/proposal/index.astro
@@ -17,7 +17,7 @@ import ProposalPage from "../../components/page/proposal/ProposalPage.tsx";
 </Layout>
 
 <script>
-  import { proposalId } from "utils/store";
+  import { projectNameForGovernance, proposalId } from "utils/store";
 
   document.addEventListener("astro:page-load", async () => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -25,5 +25,9 @@ import ProposalPage from "../../components/page/proposal/ProposalPage.tsx";
     if (id) {
       proposalId.set(Number(id));
     }
+    const projectName = urlParams.get("name") || "";
+    if (projectName) {
+      projectNameForGovernance.set(projectName);
+    }
   });
 </script>
diff --git a/dapp/src/pages/proposal/new.astro b/dapp/src/pages/proposal/new.astro
index 354977db..0440787b 100644
--- a/dapp/src/pages/proposal/new.astro
+++ b/dapp/src/pages/proposal/new.astro
@@ -19,5 +19,15 @@ import NewProposalPage from "components/page/governance/NewProposalPage.astro";
 </Layout>
 
 <script>
-  document.addEventListener("astro:page-load", async () => {});
+  import { projectNameForGovernance } from "utils/store";
+
+  document.addEventListener("astro:page-load", async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const projectName = urlParams.get("name") || "";
+    if (projectName) {
+      projectNameForGovernance.set(projectName);
+    } else {
+      alert("Project name is not provided");
+    }
+  });
 </script>

From d97bdea854543a8b7ad4f6e7e5b4eb1274938810 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Sun, 1 Dec 2024 23:38:01 +0900
Subject: [PATCH 11/19] chore: update proposal interface

---
 .../components/page/proposal/ProposalPage.tsx | 20 ++++--
 dapp/src/constants/demoProposalData.ts        | 62 +++++--------------
 dapp/src/types/proposal.ts                    | 14 ++---
 dapp/src/utils/utils.ts                       |  2 +-
 4 files changed, 38 insertions(+), 60 deletions(-)

diff --git a/dapp/src/components/page/proposal/ProposalPage.tsx b/dapp/src/components/page/proposal/ProposalPage.tsx
index faa1c993..fdfb7305 100644
--- a/dapp/src/components/page/proposal/ProposalPage.tsx
+++ b/dapp/src/components/page/proposal/ProposalPage.tsx
@@ -19,6 +19,7 @@ import {
   fetchOutcomeDataFromIPFS,
   fetchProposalFromIPFS,
 } from "@service/ProposalService";
+import { getProjectFromName } from "@service/ReadContractService";
 import type {
   ProposalOutcome,
   ProposalView,
@@ -68,19 +69,28 @@ const ProposalPage: React.FC = () => {
   const getProposalDetails = async () => {
     if (id && projectName) {
       const proposal = demoProposalData.find((p) => p.id === id);
+      const projectInfo = await getProjectFromName(projectName);
+
       if (proposal) {
         const proposalStatusView = modifyProposalStatusToView(
           proposal.status,
-          proposal.endDate,
+          proposal.voting_ends_at,
         );
         const proposalView: ProposalView = {
-          ...proposal,
+          id: proposal.id,
+          title: proposal.title,
+          projectName: projectName,
+          maintainers: projectInfo?.maintainers || [],
+          ipfsLink: proposal.ipfs,
+          endDate: proposal.voting_ends_at,
+          nqg: proposal.nqg,
+          voteStatus: proposal.voteStatus,
           status: proposalStatusView as ProposalViewStatus,
         };
         setProposal(proposalView);
-        const description = await fetchProposalFromIPFS(proposal.ipfsLink);
+        const description = await fetchProposalFromIPFS(proposal.ipfs);
         setDescription(description);
-        const outcome = await fetchOutcomeDataFromIPFS(proposal.ipfsLink);
+        const outcome = await fetchOutcomeDataFromIPFS(proposal.ipfs);
         setOutcome(outcome);
       } else {
         alert("Proposal not found");
@@ -124,7 +134,7 @@ const ProposalPage: React.FC = () => {
       </div>
       {isVotersModalOpen && proposal?.voteStatus && (
         <VotersModal
-          NQGScore={proposal?.voteStatus?.nqgScore || 0}
+          NQGScore={proposal?.nqg || 0}
           voteData={(voteType && proposal?.voteStatus?.[voteType]) || null}
           onClose={() => setIsVotersModalOpen(false)}
         />
diff --git a/dapp/src/constants/demoProposalData.ts b/dapp/src/constants/demoProposalData.ts
index 294d1dc7..2ceb06f9 100644
--- a/dapp/src/constants/demoProposalData.ts
+++ b/dapp/src/constants/demoProposalData.ts
@@ -4,16 +4,10 @@ export const demoProposalData: Proposal[] = [
   {
     id: 5,
     title: "Support: Add DAO system to the project",
-    projectName: "Tansu",
-    maintainers: [
-      "GCMFQP44AR32S7IRIUKNOEJW5PNWOCLRHLQWSHUCSV4QZOMUXZOVA7Q2",
-      "GDOQ67KNQFEQW27QTLSBD2UWDAGPWVFCK6TP73WF7OS2A3VEYSAZXQWD",
-    ],
-    ipfsLink: "bafybeigstnjnededvbckmvlmodpw2m745i5lidmyttb4u7o6ouiudokbx4",
+    ipfs: "bafybeigstnjnededvbckmvlmodpw2m745i5lidmyttb4u7o6ouiudokbx4",
     status: "active",
+    nqg: 3.7,
     voteStatus: {
-      totalScore: 6,
-      nqgScore: 3.7,
       approve: {
         voteType: "approve",
         score: 4,
@@ -95,21 +89,15 @@ export const demoProposalData: Proposal[] = [
         },
       },
     },
-    endDate: "2024-11-24",
+    voting_ends_at: "2024-11-24",
   },
   {
     id: 4,
     title: "Hire design team",
-    projectName: "Tansu",
-    maintainers: [
-      "GCMFQP44AR32S7IRIUKNOEJW5PNWOCLRHLQWSHUCSV4QZOMUXZOVA7Q2",
-      "GDOQ67KNQFEQW27QTLSBD2UWDAGPWVFCK6TP73WF7OS2A3VEYSAZXQWD",
-    ],
-    ipfsLink: "bafybeifzgwidr5ppkwplu4g7ckylksscxslgu367bbtrptzhkgdsai6yxa",
+    ipfs: "bafybeifzgwidr5ppkwplu4g7ckylksscxslgu367bbtrptzhkgdsai6yxa",
     status: "active",
+    nqg: 4.5,
     voteStatus: {
-      totalScore: 7,
-      nqgScore: 4.5,
       approve: {
         voteType: "approve",
         score: 5,
@@ -197,21 +185,15 @@ export const demoProposalData: Proposal[] = [
         },
       },
     },
-    endDate: "2024-11-17",
+    voting_ends_at: "2024-11-17",
   },
   {
     id: 3,
     title: "Use design system from Stellar",
-    projectName: "Tansu",
-    maintainers: [
-      "GCMFQP44AR32S7IRIUKNOEJW5PNWOCLRHLQWSHUCSV4QZOMUXZOVA7Q2",
-      "GDOQ67KNQFEQW27QTLSBD2UWDAGPWVFCK6TP73WF7OS2A3VEYSAZXQWD",
-    ],
-    ipfsLink: "bafybeiafz4gvlwe74n4chp3elpxuogusqsutpj6vrprj5bazrb3yjcru5u",
+    ipfs: "bafybeiafz4gvlwe74n4chp3elpxuogusqsutpj6vrprj5bazrb3yjcru5u",
     status: "rejected",
+    nqg: 1.7,
     voteStatus: {
-      totalScore: 8,
-      nqgScore: 1.7,
       approve: {
         voteType: "approve",
         score: 3,
@@ -294,21 +276,15 @@ export const demoProposalData: Proposal[] = [
         },
       },
     },
-    endDate: "2024-11-15",
+    voting_ends_at: "2024-11-15",
   },
   {
     id: 2,
     title: "Integrate with xlm.sh",
-    projectName: "Tansu",
-    maintainers: [
-      "GCMFQP44AR32S7IRIUKNOEJW5PNWOCLRHLQWSHUCSV4QZOMUXZOVA7Q2",
-      "GDOQ67KNQFEQW27QTLSBD2UWDAGPWVFCK6TP73WF7OS2A3VEYSAZXQWD",
-    ],
-    ipfsLink: "bafybeib6ioupho3p3pliusx7tgs7dvi6mpu2bwfhayj6w6ie44lo3vvc4i",
-    status: "accepted",
+    ipfs: "bafybeib6ioupho3p3pliusx7tgs7dvi6mpu2bwfhayj6w6ie44lo3vvc4i",
+    status: "approved",
+    nqg: 4.8,
     voteStatus: {
-      totalScore: 10,
-      nqgScore: 4.8,
       approve: {
         voteType: "approve",
         score: 8,
@@ -414,21 +390,15 @@ export const demoProposalData: Proposal[] = [
         },
       },
     },
-    endDate: "2024-11-14",
+    voting_ends_at: "2024-11-14",
   },
   {
     id: 1,
     title: "Support Soroban Domains for maintainers' addresses",
-    projectName: "Tansu",
-    maintainers: [
-      "GCMFQP44AR32S7IRIUKNOEJW5PNWOCLRHLQWSHUCSV4QZOMUXZOVA7Q2",
-      "GDOQ67KNQFEQW27QTLSBD2UWDAGPWVFCK6TP73WF7OS2A3VEYSAZXQWD",
-    ],
-    ipfsLink: "bafybeifaztpwi4j2jslrbofmifj2teld6aglhny2z6ivjga7vv5thidrr4",
+    ipfs: "bafybeifaztpwi4j2jslrbofmifj2teld6aglhny2z6ivjga7vv5thidrr4",
     status: "cancelled",
+    nqg: 0,
     voteStatus: {
-      totalScore: 0,
-      nqgScore: 0,
       approve: {
         voteType: "approve",
         score: 0,
@@ -457,7 +427,7 @@ export const demoProposalData: Proposal[] = [
         },
       },
     },
-    endDate: null,
+    voting_ends_at: null,
   },
 ];
 
diff --git a/dapp/src/types/proposal.ts b/dapp/src/types/proposal.ts
index 988fbfb3..e6c5c6d6 100644
--- a/dapp/src/types/proposal.ts
+++ b/dapp/src/types/proposal.ts
@@ -1,4 +1,4 @@
-export type ProposalStatus = "active" | "rejected" | "cancelled" | "accepted";
+export type ProposalStatus = "active" | "rejected" | "cancelled" | "approved";
 
 export type ProposalViewStatus =
   | "active"
@@ -10,12 +10,11 @@ export type ProposalViewStatus =
 export interface Proposal {
   id: number;
   title: string;
-  projectName: string;
-  maintainers: string[];
-  ipfsLink: string;
+  ipfs: string;
+  nqg: number;
   status: ProposalStatus;
+  voting_ends_at: string | null;
   voteStatus: VoteStatus;
-  endDate: string | null;
 }
 
 export interface ProposalView {
@@ -25,8 +24,9 @@ export interface ProposalView {
   maintainers: string[];
   ipfsLink: string;
   status: ProposalViewStatus;
-  voteStatus: VoteStatus;
   endDate: string | null;
+  nqg: number;
+  voteStatus: VoteStatus;
 }
 
 export interface ProposalCardView {
@@ -41,8 +41,6 @@ export type VoteType = "approve" | "reject" | "abstain";
 export type VoterRole = "maintainer" | "contributor" | "community";
 
 export interface VoteStatus {
-  totalScore: number;
-  nqgScore: number;
   approve: VoteData;
   reject: VoteData;
   abstain: VoteData;
diff --git a/dapp/src/utils/utils.ts b/dapp/src/utils/utils.ts
index e57bd414..68681b87 100644
--- a/dapp/src/utils/utils.ts
+++ b/dapp/src/utils/utils.ts
@@ -81,7 +81,7 @@ export const modifyProposalStatusToView = (
   status: ProposalStatus,
   endDate: string | null,
 ): ProposalViewStatus => {
-  if (status === "accepted") {
+  if (status === "approved") {
     return "approved";
   }
   if (status === "active") {

From 963359bf2e0f929d7cca5f51890720876d157e28 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Sun, 1 Dec 2024 23:40:53 +0900
Subject: [PATCH 12/19] chore: remove warning in svg code

---
 dapp/src/components/page/proposal/ProposalDetail.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dapp/src/components/page/proposal/ProposalDetail.tsx b/dapp/src/components/page/proposal/ProposalDetail.tsx
index ac2f1286..b2d6dfea 100644
--- a/dapp/src/components/page/proposal/ProposalDetail.tsx
+++ b/dapp/src/components/page/proposal/ProposalDetail.tsx
@@ -47,7 +47,7 @@ const ProposalDetail: React.FC<ProposalDetailProps> = ({
                 y="0px"
                 className="w-4 sm:w-6 h-4 sm:h-6 fill-black hover:fill-blue"
                 viewBox="0 0 512 512"
-                enable-background="new 0 0 512 512"
+                enableBackground="new 0 0 512 512"
               >
                 <path d="M459.654,233.373l-90.531,90.5c-49.969,50-131.031,50-181,0c-7.875-7.844-14.031-16.688-19.438-25.813  l42.063-42.063c2-2.016,4.469-3.172,6.828-4.531c2.906,9.938,7.984,19.344,15.797,27.156c24.953,24.969,65.563,24.938,90.5,0  l90.5-90.5c24.969-24.969,24.969-65.563,0-90.516c-24.938-24.953-65.531-24.953-90.5,0l-32.188,32.219  c-26.109-10.172-54.25-12.906-81.641-8.891l68.578-68.578c50-49.984,131.031-49.984,181.031,0  C509.623,102.342,509.623,183.389,459.654,233.373z M220.326,382.186l-32.203,32.219c-24.953,24.938-65.563,24.938-90.516,0  c-24.953-24.969-24.953-65.563,0-90.531l90.516-90.5c24.969-24.969,65.547-24.969,90.5,0c7.797,7.797,12.875,17.203,15.813,27.125  c2.375-1.375,4.813-2.5,6.813-4.5l42.063-42.047c-5.375-9.156-11.563-17.969-19.438-25.828c-49.969-49.984-131.031-49.984-181.016,0  l-90.5,90.5c-49.984,50-49.984,131.031,0,181.031c49.984,49.969,131.031,49.969,181.016,0l68.594-68.594  C274.561,395.092,246.42,392.342,220.326,382.186z" />
               </svg>
@@ -76,7 +76,7 @@ const ProposalDetail: React.FC<ProposalDetailProps> = ({
                 y="0px"
                 className="w-4 sm:w-6 h-4 sm:h-6 fill-black hover:fill-blue"
                 viewBox="0 0 512 512"
-                enable-background="new 0 0 512 512"
+                enableBackground="new 0 0 512 512"
               >
                 <path d="M459.654,233.373l-90.531,90.5c-49.969,50-131.031,50-181,0c-7.875-7.844-14.031-16.688-19.438-25.813  l42.063-42.063c2-2.016,4.469-3.172,6.828-4.531c2.906,9.938,7.984,19.344,15.797,27.156c24.953,24.969,65.563,24.938,90.5,0  l90.5-90.5c24.969-24.969,24.969-65.563,0-90.516c-24.938-24.953-65.531-24.953-90.5,0l-32.188,32.219  c-26.109-10.172-54.25-12.906-81.641-8.891l68.578-68.578c50-49.984,131.031-49.984,181.031,0  C509.623,102.342,509.623,183.389,459.654,233.373z M220.326,382.186l-32.203,32.219c-24.953,24.938-65.563,24.938-90.516,0  c-24.953-24.969-24.953-65.563,0-90.531l90.516-90.5c24.969-24.969,65.547-24.969,90.5,0c7.797,7.797,12.875,17.203,15.813,27.125  c2.375-1.375,4.813-2.5,6.813-4.5l42.063-42.047c-5.375-9.156-11.563-17.969-19.438-25.828c-49.969-49.984-131.031-49.984-181.016,0  l-90.5,90.5c-49.984,50-49.984,131.031,0,181.031c49.984,49.969,131.031,49.969,181.016,0l68.594-68.594  C274.561,395.092,246.42,392.342,220.326,382.186z" />
               </svg>
@@ -168,7 +168,7 @@ export const OutcomeDetail: React.FC<{
                 <title>Stellar</title>
                 <path
                   d="M12.283 1.851A10.154 10.154 0 0 0 1.846 12.002c0 0.259 0.01 0.516 0.03 0.773A1.847 1.847 0 0 1 0.872 14.56L0 15.005v2.074l2.568 -1.309 0.832 -0.424 0.82 -0.417 14.71 -7.496 1.653 -0.842L24 4.85V2.776l-3.387 1.728 -2.89 1.473 -13.955 7.108a8.376 8.376 0 0 1 -0.07 -1.086 8.313 8.313 0 0 1 12.366 -7.247l1.654 -0.843 0.247 -0.126a10.154 10.154 0 0 0 -5.682 -1.932zM24 6.925 5.055 16.571l-1.653 0.844L0 19.15v2.072L3.378 19.5l2.89 -1.473 13.97 -7.117a8.474 8.474 0 0 1 0.07 1.092A8.313 8.313 0 0 1 7.93 19.248l-0.101 0.054 -1.793 0.914a10.154 10.154 0 0 0 16.119 -8.214c0 -0.26 -0.01 -0.522 -0.03 -0.78a1.848 1.848 0 0 1 1.003 -1.785L24 8.992Z"
-                  stroke-width="1"
+                  strokeWidth="1"
                 ></path>
               </svg>
               <span className="text-xs sm:text-sm md:text-base">

From e8239c2f38a66114f548103c279204bcf6742c9a Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Mon, 2 Dec 2024 00:01:16 +0900
Subject: [PATCH 13/19] chore: add modify proposal to view interface

---
 .../page/governance/ProposalList.tsx          | 14 ++-------
 .../components/page/proposal/ProposalPage.tsx | 31 +++++--------------
 dapp/src/utils/utils.ts                       | 29 ++++++++++++++++-
 3 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/dapp/src/components/page/governance/ProposalList.tsx b/dapp/src/components/page/governance/ProposalList.tsx
index 1c2ad448..7ee7d855 100644
--- a/dapp/src/components/page/governance/ProposalList.tsx
+++ b/dapp/src/components/page/governance/ProposalList.tsx
@@ -5,8 +5,8 @@ import Pagination from "../../utils/Pagination";
 import { demoProposalData } from "constants/demoProposalData";
 import ProposalCard from "./ProposalCard";
 import { projectNameForGovernance } from "utils/store";
-import { modifyProposalStatusToView } from "utils/utils";
-import type { ProposalView, ProposalViewStatus } from "types/proposal";
+import { modifyProposalToView } from "utils/utils";
+import type { ProposalView } from "types/proposal";
 
 const ProposalList: React.FC = () => {
   const projectName = useStore(projectNameForGovernance);
@@ -16,15 +16,7 @@ const ProposalList: React.FC = () => {
   const fetchProposalData = async (_page: number) => {
     if (projectName) {
       const updatedProposalData = demoProposalData.map((proposal) => {
-        const proposalStatusView = modifyProposalStatusToView(
-          proposal.status,
-          proposal.endDate,
-        );
-
-        return {
-          ...proposal,
-          status: proposalStatusView as ProposalViewStatus,
-        };
+        return modifyProposalToView(proposal, projectName);
       });
 
       setProposalData(updatedProposalData);
diff --git a/dapp/src/components/page/proposal/ProposalPage.tsx b/dapp/src/components/page/proposal/ProposalPage.tsx
index fdfb7305..7b3c0ee2 100644
--- a/dapp/src/components/page/proposal/ProposalPage.tsx
+++ b/dapp/src/components/page/proposal/ProposalPage.tsx
@@ -8,7 +8,7 @@ import VoteStatusBar from "./VoteStatusBar";
 import VotersModal from "./VotersModal";
 import VotingModal from "./VotingModal";
 import ExecuteProposalModal from "./ExecuteProposalModal";
-import { modifyProposalStatusToView } from "utils/utils";
+import { modifyProposalToView } from "utils/utils";
 import {
   connectedPublicKey,
   projectNameForGovernance,
@@ -20,12 +20,7 @@ import {
   fetchProposalFromIPFS,
 } from "@service/ProposalService";
 import { getProjectFromName } from "@service/ReadContractService";
-import type {
-  ProposalOutcome,
-  ProposalView,
-  ProposalViewStatus,
-  VoteType,
-} from "types/proposal";
+import type { ProposalOutcome, ProposalView, VoteType } from "types/proposal";
 
 const ProposalPage: React.FC = () => {
   const id = useStore(proposalId);
@@ -39,6 +34,7 @@ const ProposalPage: React.FC = () => {
   const [description, setDescription] = useState("");
   const [outcome, setOutcome] = useState<ProposalOutcome | null>(null);
   const [voteType, setVoteType] = useState<VoteType>();
+  const [projectMaintainers, setProjectMaintainers] = useState<string[]>([]);
 
   const openVotersModal = (voteType: VoteType) => {
     if (proposal?.status !== "active") {
@@ -70,23 +66,12 @@ const ProposalPage: React.FC = () => {
     if (id && projectName) {
       const proposal = demoProposalData.find((p) => p.id === id);
       const projectInfo = await getProjectFromName(projectName);
+      if (projectInfo && projectInfo.maintainers) {
+        setProjectMaintainers(projectInfo?.maintainers);
+      }
 
       if (proposal) {
-        const proposalStatusView = modifyProposalStatusToView(
-          proposal.status,
-          proposal.voting_ends_at,
-        );
-        const proposalView: ProposalView = {
-          id: proposal.id,
-          title: proposal.title,
-          projectName: projectName,
-          maintainers: projectInfo?.maintainers || [],
-          ipfsLink: proposal.ipfs,
-          endDate: proposal.voting_ends_at,
-          nqg: proposal.nqg,
-          voteStatus: proposal.voteStatus,
-          status: proposalStatusView as ProposalViewStatus,
-        };
+        const proposalView = modifyProposalToView(proposal, projectName);
         setProposal(proposalView);
         const description = await fetchProposalFromIPFS(proposal.ipfs);
         setDescription(description);
@@ -112,7 +97,7 @@ const ProposalPage: React.FC = () => {
         submitVote={() => openVotingModal()}
         executeProposal={() => openExecuteProposalModal()}
         status={proposal?.status || null}
-        maintainers={proposal?.maintainers || []}
+        maintainers={projectMaintainers}
       />
       <div className="flex flex-col gap-3 sm:gap-5 md:gap-7">
         <ProposalStatusSection
diff --git a/dapp/src/utils/utils.ts b/dapp/src/utils/utils.ts
index 68681b87..93fe2db9 100644
--- a/dapp/src/utils/utils.ts
+++ b/dapp/src/utils/utils.ts
@@ -1,5 +1,10 @@
 import { TransactionBuilder } from "@stellar/stellar-sdk";
-import type { ProposalStatus, ProposalViewStatus } from "types/proposal";
+import type {
+  Proposal,
+  ProposalStatus,
+  ProposalView,
+  ProposalViewStatus,
+} from "types/proposal";
 
 export function truncateMiddle(str: string, maxLength: number): string {
   if (str.length <= maxLength) return str;
@@ -96,3 +101,25 @@ export const modifyProposalStatusToView = (
   }
   return status;
 };
+
+export const modifyProposalToView = (
+  proposal: Proposal,
+  projectName: string,
+): ProposalView => {
+  const proposalStatusView = modifyProposalStatusToView(
+    proposal.status,
+    proposal.voting_ends_at,
+  );
+  const proposalView: ProposalView = {
+    id: proposal.id,
+    title: proposal.title,
+    projectName: projectName,
+    ipfsLink: proposal.ipfs,
+    endDate: proposal.voting_ends_at,
+    nqg: proposal.nqg,
+    voteStatus: proposal.voteStatus,
+    status: proposalStatusView as ProposalViewStatus,
+  };
+
+  return proposalView;
+};

From 310275e76ad9e539c24ce8b0a1c6c122cd330010 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Mon, 2 Dec 2024 00:01:55 +0900
Subject: [PATCH 14/19] chore: remove maintainers from proposal info

---
 dapp/src/constants/demoProposalData.ts | 2 +-
 dapp/src/types/proposal.ts             | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/dapp/src/constants/demoProposalData.ts b/dapp/src/constants/demoProposalData.ts
index 2ceb06f9..5d40be63 100644
--- a/dapp/src/constants/demoProposalData.ts
+++ b/dapp/src/constants/demoProposalData.ts
@@ -89,7 +89,7 @@ export const demoProposalData: Proposal[] = [
         },
       },
     },
-    voting_ends_at: "2024-11-24",
+    voting_ends_at: "2024-12-15",
   },
   {
     id: 4,
diff --git a/dapp/src/types/proposal.ts b/dapp/src/types/proposal.ts
index e6c5c6d6..d171b0c8 100644
--- a/dapp/src/types/proposal.ts
+++ b/dapp/src/types/proposal.ts
@@ -21,7 +21,6 @@ export interface ProposalView {
   id: number;
   title: string;
   projectName: string;
-  maintainers: string[];
   ipfsLink: string;
   status: ProposalViewStatus;
   endDate: string | null;

From b4a81d1bdd68be44b1413bf29aab1e62e18ab802 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Mon, 2 Dec 2024 00:11:05 +0900
Subject: [PATCH 15/19] chore: remove warning

---
 dapp/src/components/page/proposal/VotersModal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/dapp/src/components/page/proposal/VotersModal.tsx b/dapp/src/components/page/proposal/VotersModal.tsx
index 2a614e70..d7b71afe 100644
--- a/dapp/src/components/page/proposal/VotersModal.tsx
+++ b/dapp/src/components/page/proposal/VotersModal.tsx
@@ -72,8 +72,9 @@ const VotersCard: React.FC<VoterCardProps> = ({ voterRole, voters }) => {
         </div>
       </div>
       <div className="flex flex-wrap min-h-10 gap-x-2 sm:gap-x-3 md:gap-x-4 gap-y-1 sm:gap-y-2 md:gap-y-3">
-        {voters.map((voter) => (
+        {voters.map((voter, index) => (
           <div
+            key={index}
             onClick={() => {
               voter.github && window.open(voter.github, "_blank");
             }}

From 3528e20408ae66d9a7d542c13fd923376477b413 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Mon, 2 Dec 2024 11:31:03 +0900
Subject: [PATCH 16/19] fix: remove public from private env data

---
 dapp/.env.example                     | 4 ++--
 dapp/src/env.d.ts                     | 4 ++--
 dapp/src/pages/api/w3up-delegation.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/dapp/.env.example b/dapp/.env.example
index 91e8e3dd..c9d2b591 100644
--- a/dapp/.env.example
+++ b/dapp/.env.example
@@ -11,5 +11,5 @@ SOROBAN_NETWORK="testnet | public"
 PUBLIC_DEFAULT_FEE="100"
 PUBLIC_DEFAULT_TIMEOUT=30
 
-PUBLIC_STORACHA_SING_PRIVATE_KEY=""
-PUBLIC_STORACHA_PROOF=""
\ No newline at end of file
+STORACHA_SING_PRIVATE_KEY=""
+STORACHA_PROOF=""
\ No newline at end of file
diff --git a/dapp/src/env.d.ts b/dapp/src/env.d.ts
index 1b7b6876..7d03d876 100644
--- a/dapp/src/env.d.ts
+++ b/dapp/src/env.d.ts
@@ -11,8 +11,8 @@ interface ImportMetaEnv {
   readonly SOROBAN_NETWORK: string;
   readonly PUBLIC_DEFAULT_FEE: string;
   readonly PUBLIC_DEFAULT_TIMEOUT: number;
-  readonly PUBLIC_STORACHA_SING_PRIVATE_KEY: string;
-  readonly PUBLIC_STORACHA_PROOF: string;
+  readonly STORACHA_SING_PRIVATE_KEY: string;
+  readonly STORACHA_PROOF: string;
 }
 
 interface ImportMeta {
diff --git a/dapp/src/pages/api/w3up-delegation.js b/dapp/src/pages/api/w3up-delegation.js
index 241b381f..2bf9625f 100644
--- a/dapp/src/pages/api/w3up-delegation.js
+++ b/dapp/src/pages/api/w3up-delegation.js
@@ -29,8 +29,8 @@ export const POST = async ({ request }) => {
 };
 
 async function backend(did) {
-  const key = import.meta.env.PUBLIC_STORACHA_SING_PRIVATE_KEY;
-  const storachaProof = import.meta.env.PUBLIC_STORACHA_PROOF;
+  const key = import.meta.env.STORACHA_SING_PRIVATE_KEY;
+  const storachaProof = import.meta.env.STORACHA_PROOF;
 
   const principal = Signer.parse(key);
   const store = new StoreMemory();

From 8d988f930aef8c1d94f5e1cf5a92813a23b6a386 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Mon, 2 Dec 2024 11:34:07 +0900
Subject: [PATCH 17/19] chore: set delegation expire time as 10s

---
 dapp/src/pages/api/w3up-delegation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/src/pages/api/w3up-delegation.js b/dapp/src/pages/api/w3up-delegation.js
index 2bf9625f..cbbb14e0 100644
--- a/dapp/src/pages/api/w3up-delegation.js
+++ b/dapp/src/pages/api/w3up-delegation.js
@@ -47,7 +47,7 @@ async function backend(did) {
     "filecoin/offer",
     "upload/add",
   ];
-  const expiration = Math.floor(Date.now() / 1000) + 60 * 60 * 24;
+  const expiration = Math.floor(Date.now() / 1000) + 10;
   const delegation = await client.createDelegation(audience, abilities, {
     expiration,
   });

From f5e6ff54efc4042d7fa6cade1ffd4af830738fd9 Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Mon, 2 Dec 2024 14:21:47 +0900
Subject: [PATCH 18/19] chore: check maintainer to submit proposal

---
 .../page/governance/GovernancePageTitle.astro | 26 +++++++++++++--
 .../page/governance/ProposalForm.tsx          | 33 +++++++++++++++++++
 .../page/governance/ProposalList.tsx          |  2 --
 dapp/src/pages/proposal/new.astro             | 14 ++++----
 4 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/dapp/src/components/page/governance/GovernancePageTitle.astro b/dapp/src/components/page/governance/GovernancePageTitle.astro
index a923cf60..f4b09ad5 100644
--- a/dapp/src/components/page/governance/GovernancePageTitle.astro
+++ b/dapp/src/components/page/governance/GovernancePageTitle.astro
@@ -18,13 +18,16 @@ import Topic from "../../utils/Topic.astro";
 </div>
 
 <script>
+  import { getProjectFromName } from "@service/ReadContractService";
   import { navigate } from "astro:transitions/client";
-  import { projectNameForGovernance } from "utils/store";
+  import { connectedPublicKey, projectNameForGovernance } from "utils/store";
   import { capitalizeFirstLetter } from "utils/utils";
 
   document.addEventListener("astro:page-load", async () => {
     let projectName = "";
-    projectNameForGovernance.subscribe((_projectName) => {
+    let maintainers: string[] = [];
+    let connectedAddress = "";
+    projectNameForGovernance.subscribe(async (_projectName) => {
       if (_projectName) {
         const titleElement = document
           .getElementById("proposal-page-topic")
@@ -33,17 +36,34 @@ import Topic from "../../utils/Topic.astro";
           titleElement.textContent = `${capitalizeFirstLetter(_projectName)} Governance`;
         }
         projectName = _projectName;
+        const projectInfo = await getProjectFromName(_projectName);
+        if (projectInfo && projectInfo.maintainers) {
+          maintainers = projectInfo?.maintainers;
+        }
       }
     });
 
+    connectedPublicKey.subscribe((publicKey) => {
+      connectedAddress = publicKey;
+    });
+
     const submitProposalButton = document.getElementById(
       "wrap-create-proposal-button",
     );
 
     if (submitProposalButton) {
       submitProposalButton.addEventListener("click", () => {
+        if (!connectedAddress) {
+          alert("Please connect your wallet first");
+          return;
+        }
+
         if (projectName) {
-          navigate(`/proposal/new?name=${projectName}`);
+          if (maintainers.includes(connectedAddress)) {
+            navigate(`/proposal/new?name=${projectName}`);
+          } else {
+            alert("Only maintainers can submit proposals");
+          }
         } else {
           alert("Project name is not provided");
         }
diff --git a/dapp/src/components/page/governance/ProposalForm.tsx b/dapp/src/components/page/governance/ProposalForm.tsx
index ce537460..b64fda2c 100644
--- a/dapp/src/components/page/governance/ProposalForm.tsx
+++ b/dapp/src/components/page/governance/ProposalForm.tsx
@@ -34,11 +34,14 @@ import {
   useCodeBlockEditorContext,
 } from "@mdxeditor/editor";
 import "@mdxeditor/editor/style.css";
+import { useStore } from "@nanostores/react";
 import * as Delegation from "@web3-storage/w3up-client/delegation";
 import * as Client from "@web3-storage/w3up-client";
 import { capitalizeFirstLetter, getIpfsBasicLink } from "utils/utils";
 import type { ProposalOutcome } from "types/proposal";
 import Loading from "components/utils/Loading";
+import { connectedPublicKey, projectNameForGovernance } from "utils/store";
+import { getProjectFromName } from "@service/ReadContractService";
 
 const ProposalForm: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -53,11 +56,31 @@ const ProposalForm: React.FC = () => {
   const [imageFiles, setImageFiles] = useState<
     { localUrl: string; publicUrl: string; source: File }[]
   >([]);
+  const connectedAddress = useStore(connectedPublicKey);
+  const projectName = useStore(projectNameForGovernance);
+  const [projectMaintainers, setProjectMaintainers] = useState<string[]>([]);
 
   useEffect(() => {
     setIsClient(true);
   }, []);
 
+  const getProjectMaintainers = async () => {
+    if (projectName) {
+      const projectInfo = await getProjectFromName(projectName);
+      if (projectInfo && projectInfo.maintainers) {
+        setProjectMaintainers(projectInfo?.maintainers);
+      }
+    } else {
+      alert("Project name is not provided");
+    }
+  };
+
+  useEffect(() => {
+    if (isClient) {
+      getProjectMaintainers();
+    }
+  }, [isClient, projectName]);
+
   if (!isClient) {
     return null;
   }
@@ -90,6 +113,16 @@ const ProposalForm: React.FC = () => {
   };
 
   const submitProposal = async () => {
+    if (!connectedAddress) {
+      alert("Please connect your wallet first");
+      return;
+    }
+
+    if (projectMaintainers.includes(connectedAddress)) {
+      alert("You are not a maintainer of this project");
+      return;
+    }
+
     setIsLoading(true);
     const client = await Client.create();
     const apiUrl = `/api/w3up-delegation`;
diff --git a/dapp/src/components/page/governance/ProposalList.tsx b/dapp/src/components/page/governance/ProposalList.tsx
index 7ee7d855..aa221634 100644
--- a/dapp/src/components/page/governance/ProposalList.tsx
+++ b/dapp/src/components/page/governance/ProposalList.tsx
@@ -20,8 +20,6 @@ const ProposalList: React.FC = () => {
       });
 
       setProposalData(updatedProposalData);
-    } else {
-      alert("Project name is not provided");
     }
   };
 
diff --git a/dapp/src/pages/proposal/new.astro b/dapp/src/pages/proposal/new.astro
index 0440787b..415f68d5 100644
--- a/dapp/src/pages/proposal/new.astro
+++ b/dapp/src/pages/proposal/new.astro
@@ -22,12 +22,14 @@ import NewProposalPage from "components/page/governance/NewProposalPage.astro";
   import { projectNameForGovernance } from "utils/store";
 
   document.addEventListener("astro:page-load", async () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const projectName = urlParams.get("name") || "";
-    if (projectName) {
-      projectNameForGovernance.set(projectName);
-    } else {
-      alert("Project name is not provided");
+    if (window.location.pathname === "/proposal/new") {
+      const urlParams = new URLSearchParams(window.location.search);
+      const projectName = urlParams.get("name") || "";
+      if (projectName) {
+        projectNameForGovernance.set(projectName);
+      } else {
+        alert("Project name is not provided");
+      }
     }
   });
 </script>

From 97d5dacf5c02b158afc8562a215f10ef1e18e7cd Mon Sep 17 00:00:00 2001
From: 0xExp-po <xtinc.exp@gmail.com>
Date: Mon, 2 Dec 2024 14:36:02 +0900
Subject: [PATCH 19/19] chore: redirect governance page after submit proposal

---
 .../page/governance/ProposalForm.tsx          | 110 ++++++++++--------
 1 file changed, 59 insertions(+), 51 deletions(-)

diff --git a/dapp/src/components/page/governance/ProposalForm.tsx b/dapp/src/components/page/governance/ProposalForm.tsx
index b64fda2c..97c60fdf 100644
--- a/dapp/src/components/page/governance/ProposalForm.tsx
+++ b/dapp/src/components/page/governance/ProposalForm.tsx
@@ -123,67 +123,75 @@ const ProposalForm: React.FC = () => {
       return;
     }
 
-    setIsLoading(true);
-    const client = await Client.create();
-    const apiUrl = `/api/w3up-delegation`;
+    try {
+      setIsLoading(true);
+      const client = await Client.create();
+      const apiUrl = `/api/w3up-delegation`;
 
-    const response = await fetch(apiUrl, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ did: client.agent.did() }),
-    });
-    const data = await response.arrayBuffer();
-
-    const delegation = await Delegation.extract(new Uint8Array(data));
-    if (!delegation.ok) {
-      throw new Error("Failed to extract delegation", {
-        cause: delegation.error,
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ did: client.agent.did() }),
       });
-    }
+      const data = await response.arrayBuffer();
 
-    const space = await client.addSpace(delegation.ok);
-    client.setCurrentSpace(space.did());
+      const delegation = await Delegation.extract(new Uint8Array(data));
+      if (!delegation.ok) {
+        throw new Error("Failed to extract delegation", {
+          cause: delegation.error,
+        });
+      }
 
-    const proposalOutcome: ProposalOutcome = {
-      approved: {
-        description: approveDescription,
-        xdr: approveXdr,
-      },
-      rejected: {
-        description: rejectDescription,
-        xdr: rejectXdr,
-      },
-      cancelled: {
-        description: cancelledDescription,
-        xdr: cancelledXdr,
-      },
-    };
+      const space = await client.addSpace(delegation.ok);
+      client.setCurrentSpace(space.did());
 
-    const outcome = new Blob([JSON.stringify(proposalOutcome)], {
-      type: "application/json",
-    });
+      const proposalOutcome: ProposalOutcome = {
+        approved: {
+          description: approveDescription,
+          xdr: approveXdr,
+        },
+        rejected: {
+          description: rejectDescription,
+          xdr: rejectXdr,
+        },
+        cancelled: {
+          description: cancelledDescription,
+          xdr: cancelledXdr,
+        },
+      };
 
-    let files = [new File([outcome], "outcomes.json")];
-    let description = mdText;
+      const outcome = new Blob([JSON.stringify(proposalOutcome)], {
+        type: "application/json",
+      });
 
-    imageFiles.forEach((image) => {
-      if (description.includes(image.localUrl)) {
-        description = description.replace(
-          new RegExp(image.localUrl, "g"),
-          image.publicUrl,
-        );
-        files.push(new File([image.source], image.publicUrl));
-      }
-    });
+      let files = [new File([outcome], "outcomes.json")];
+      let description = mdText;
 
-    files.push(new File([description], "proposal.md"));
+      imageFiles.forEach((image) => {
+        if (description.includes(image.localUrl)) {
+          description = description.replace(
+            new RegExp(image.localUrl, "g"),
+            image.publicUrl,
+          );
+          files.push(new File([image.source], image.publicUrl));
+        }
+      });
 
-    const directoryCid = await client.uploadDirectory(files);
+      files.push(new File([description], "proposal.md"));
 
-    setIsLoading(false);
-    alert(
-      `Proposal submitted successfully! CID: ${getIpfsBasicLink(directoryCid.toString())}`,
-    );
+      const directoryCid = await client.uploadDirectory(files);
+
+      setIsLoading(false);
+      alert(
+        `Proposal submitted successfully! CID: ${getIpfsBasicLink(directoryCid.toString())}`,
+      );
+
+      window.location.href = `/governance?name=${projectName}`;
+    } catch (error) {
+      throw new Error("Error submitting proposal", {
+        cause: error,
+      });
+    }
   };
 
   return (