Merge pull request #8 from MinaFoundation/feature/govbotOCVFrontend-0…

….0.3

Feature/govbot ocv frontend 0.0.3

astro.config.mjs

@@ -8,5 +8,11 @@ export default defineConfig({
   output: 'server',
   adapter: node({
     mode: "standalone"
-  })
+  }),
+  // Add this section to handle 404 errors
+  build: {
+    errorPages: {
+      404: '/404'
+    }
+  }
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pgtgovbotocvfrontend",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/ProposalCard.astro

@@ -33,7 +33,7 @@ const { proposal } = Astro.props;
             clip-rule="evenodd"></path>
         </svg>
         <p class="text-gray-700 font-medium">
-          <span class="font-semibold">Budget:</span>
+          <span class="font-semibold">Requested Budget:</span>
           <span class="ml-1 font-mono"
             >{proposal.budget.toLocaleString()} MINA</span
           >

src/pages/404.astro

@@ -0,0 +1,50 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="404 - Page Not Found">
+  <div
+    class="flex flex-col items-center justify-center min-h-screen text-center px-4"
+  >
+    <h1 class="text-6xl font-bold text-purple-600 mb-4">404</h1>
+    <p class="text-2xl text-gray-700 mb-8">
+      Oops! Looks like you've wandered into uncharted territory.
+    </p>
+
+    <div class="relative w-64 h-64 mb-8">
+      <div
+        id="astronaut"
+        class="absolute inset-0 bg-contain bg-center bg-no-repeat transform transition-transform duration-1000 ease-in-out"
+        style="background-image: url('/astronaut.svg');"
+      >
+      </div>
+    </div>
+
+    <p class="text-xl text-gray-600 mb-8">
+      Don't worry, our space explorer is searching for your page!
+    </p>
+  </div>
+</MainLayout>
+
+<script>
+  const astronaut = document.getElementById("astronaut");
+  let rotation = 0;
+
+  function rotateAstronaut() {
+    rotation += 5;
+    if (astronaut) {
+      astronaut.style.transform = `rotate(${rotation}deg)`;
+    }
+  }
+
+  setInterval(rotateAstronaut, 100);
+
+  document.addEventListener("mousemove", (e) => {
+    const x = e.clientX / window.innerWidth - 0.5;
+    const y = e.clientY / window.innerHeight - 0.5;
+
+    if (astronaut) {
+      astronaut.style.transform = `translate(${x * 20}px, ${y * 20}px) rotate(${rotation}deg)`;
+    }
+  });
+</script>

src/pages/vote/[id].astro

@@ -18,9 +18,11 @@ if (proposalId !== null) {
     proposal = await fetchProposal(proposalId);
     setProposalId(proposalId);
   } catch (error) {
+    console.error("Error fetching proposal:", error);
     return Astro.redirect("/404");
   }
 } else {
+  console.error("Invalid proposal ID:", id);
   return Astro.redirect("/404");
 }
 

src/utils/walletUtils.ts

@@ -1,9 +1,12 @@
-export const sendVoteTransaction = async (vote: 'yes' | 'no', proposalId: number): Promise<{ hash: string }> => {
+export const sendVoteTransaction = async (
+  vote: "yes" | "no",
+  proposalId: number
+): Promise<{ hash: string }> => {
   const memo = `${vote} ${proposalId}`;
-  const burnAddress = 'B62qiburnzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzmp7r7UN6X';
-  
+  const burnAddress = "B62qiburnzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzmp7r7UN6X";
+
   if (!window.mina) {
-    throw new Error('Auro Wallet is not installed');
+    throw new Error("Auro Wallet is not installed");
   }
 
   return await window.mina.sendPayment({
@@ -13,11 +16,13 @@ export const sendVoteTransaction = async (vote: 'yes' | 'no', proposalId: number
   });
 };
 
-export const verifyCorrectNetwork = async (expectedNetwork: string): Promise<boolean> => {
+export const verifyCorrectNetwork = async (
+  expectedNetwork: string
+): Promise<boolean> => {
   if (!window.mina) {
-    throw new Error('Auro Wallet is not installed');
+    throw new Error("Auro Wallet is not installed");
   }
 
   const currentNetwork = await window.mina.requestNetwork();
   return currentNetwork.networkID === expectedNetwork;
-};
+};