feat: optimistic proposals in home

voteagora · Jan 11, 2024 · 67cdbb7 · 67cdbb7
1 parent 04e8a6f
commit 67cdbb7
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -6,6 +6,7 @@ import { PageDivider } from "@/components/Layout/PageDivider";
 import { VStack } from "@/components/Layout/Stack";
 import { getProposals } from "./api/proposals/getProposals";
 import { getMetrics } from "./api/metrics/getMetrics";
+import { getVotableSupply } from "src/app/api/votableSupply/getVotableSupply";
 
 async function fetchProposals(page = 1) {
   "use server";
@@ -19,9 +20,16 @@ async function fetchDaoMetrics() {
   return getMetrics();
 }
 
+async function fetchVotableSupply() {
+  "use server";
+
+  return getVotableSupply();
+}
+
 export default async function Home() {
   const proposals = await fetchProposals();
   const metrics = await fetchDaoMetrics();
+  const votableSupply = await fetchVotableSupply();
 
   return (
     <VStack className={styles.metrics_container}>
@@ -31,6 +39,7 @@ export default async function Home() {
       <ProposalsList
         initialProposals={proposals}
         fetchProposals={fetchProposals}
+        votableSupply={votableSupply}
       />
     </VStack>
   );

diff --git a/src/components/Proposals/Proposal/OPOptimisticProposalStatus.jsx b/src/components/Proposals/Proposal/OPOptimisticProposalStatus.jsx
@@ -0,0 +1,31 @@
+import { VStack } from "@/components/Layout/Stack";
+import styles from "./proposal.module.scss";
+import { formatUnits } from "ethers";
+
+function formatNumber(amount, decimals = 0, maximumSignificantDigits = 4) {
+  const standardUnitAmount = Number(formatUnits(amount, decimals));
+  return standardUnitAmount;
+}
+
+export default function OPOptimisticProposalStatus({
+  proposal,
+  votableSupply,
+}) {
+  const formattedVotableSupply = Number(
+    BigInt(votableSupply) / BigInt(10 ** 18)
+  );
+  const againstLength = formatNumber(proposal.proposalResults.against);
+  const againstRelativeAmount =
+    (Math.floor(againstLength / formattedVotableSupply) * 100) / 100;
+  const status = againstRelativeAmount <= 50 ? "approved" : "defeated";
+  return (
+    <VStack className="text-right">
+      <VStack>
+        <div className={styles.cell_content_title}>
+          <p>{againstRelativeAmount}% / 50% against needed to defeat</p>
+        </div>
+        <p>Optimistically {status}</p>
+      </VStack>
+    </VStack>
+  );
+}
diff --git a/src/components/Proposals/Proposal/Proposal.jsx b/src/components/Proposals/Proposal/Proposal.jsx
@@ -7,8 +7,9 @@ import OPStandardProposalStatus from "./OPStandardProposalStatus";
 import OPApprovalProposalStatus from "./OPApprovalProposalStatus";
 import ProposalTimeStatus from "./ProposalTimeStatus";
 import { cn } from "@/lib/utils";
+import OPOptimisticProposalStatus from "./OPOptimisticProposalStatus";
 
-export default function Proposal({ proposal }) {
+export default function Proposal({ proposal, votableSupply }) {
   return (
     <Link href={`/proposals/${proposal.id}`}>
       <HStack alignItems="center" className={styles.proposal_row}>
@@ -46,6 +47,13 @@ export default function Proposal({ proposal }) {
               proposal.proposalResults && (
                 <OPStandardProposalStatus proposal={proposal} />
               )}
+            {proposal.proposalType === "OPTIMISTIC" &&
+              proposal.proposalResults && (
+                <OPOptimisticProposalStatus
+                  proposal={proposal}
+                  votableSupply={votableSupply}
+                />
+              )}
             {proposal.proposalType === "APPROVAL" && proposal.proposalData && (
               <OPApprovalProposalStatus proposal={proposal} />
             )}

diff --git a/src/components/Proposals/ProposalsList/ProposalsList.jsx b/src/components/Proposals/ProposalsList/ProposalsList.jsx
@@ -13,7 +13,11 @@ import Image from "next/image";
 import Proposal from "../Proposal/Proposal";
 import Loader from "@/components/Layout/Loader";
 
-export default function ProposalsList({ initialProposals, fetchProposals }) {
+export default function ProposalsList({
+  initialProposals,
+  fetchProposals,
+  votableSupply,
+}) {
   const router = useRouter();
   const fetching = React.useRef(false);
   const [pages, setPages] = React.useState([initialProposals] || []);
@@ -51,7 +55,11 @@ export default function ProposalsList({ initialProposals, fetchProposals }) {
             element="main"
           >
             {proposals.map((proposal) => (
-              <Proposal key={proposal.id} proposal={proposal} />
+              <Proposal
+                key={proposal.id}
+                proposal={proposal}
+                votableSupply={votableSupply}
+              />
             ))}
           </InfiniteScroll>
         </div>