From b61434d9603322174316ae6054aa4989a27e9b76 Mon Sep 17 00:00:00 2001
From: DaveVodrazka <dave.vodrazka@gmail.com>
Date: Fri, 28 Jun 2024 13:48:02 +0200
Subject: [PATCH] feat: live proposals

---
 src/calls/liveProposals.ts                |  8 ++++++++
 src/components/Proposal/ProposalItem.tsx  |  5 ++---
 src/components/Proposal/ProposalTable.tsx |  3 +--
 src/components/Proposal/index.tsx         | 23 ++++++++++++++++++++---
 src/components/Vote/Vote.tsx              |  6 ++----
 src/pages/governance.tsx                  | 13 ++++++++++++-
 src/queries/keys.ts                       |  1 +
 src/utils/blockchain.ts                   |  2 +-
 8 files changed, 47 insertions(+), 14 deletions(-)
 create mode 100644 src/calls/liveProposals.ts

diff --git a/src/calls/liveProposals.ts b/src/calls/liveProposals.ts
new file mode 100644
index 00000000..159478c5
--- /dev/null
+++ b/src/calls/liveProposals.ts
@@ -0,0 +1,8 @@
+import { GovernanceContract } from "../utils/blockchain";
+
+export const fetchLiveProposals = async (): Promise<number[]> => {
+  const res = (await GovernanceContract.call("get_live_proposals")) as bigint[];
+  const proposals = res.map((bi: bigint) => Number(bi));
+
+  return proposals;
+};
diff --git a/src/components/Proposal/ProposalItem.tsx b/src/components/Proposal/ProposalItem.tsx
index 77c43028..252ea844 100644
--- a/src/components/Proposal/ProposalItem.tsx
+++ b/src/components/Proposal/ProposalItem.tsx
@@ -1,16 +1,15 @@
 import { AccountInterface } from "starknet";
-import { Proposal } from "../../types/proposal";
 import { Vote } from "../Vote/Vote";
 
 type Props = {
-  proposal: Proposal;
+  proposal: number;
   balance: bigint;
   account?: AccountInterface;
 };
 
 export const ProposalItem = ({ proposal, balance, account }: Props) => (
   <div>
-    <h3>Proposal {proposal.id}</h3>
+    <h3>Proposal {proposal}</h3>
     <div>
       <Vote proposal={proposal} balance={balance} account={account} />
     </div>
diff --git a/src/components/Proposal/ProposalTable.tsx b/src/components/Proposal/ProposalTable.tsx
index 5e7c5926..b5b48160 100644
--- a/src/components/Proposal/ProposalTable.tsx
+++ b/src/components/Proposal/ProposalTable.tsx
@@ -1,4 +1,3 @@
-import { Proposal } from "../../types/proposal";
 import { ProposalItem } from "./ProposalItem";
 import { useAccount } from "../../hooks/useAccount";
 import { useState, useEffect } from "react";
@@ -6,7 +5,7 @@ import { balanceOfCarmineToken } from "../../calls/balanceOf";
 import styles from "./Proposal.module.css";
 
 type Props = {
-  activeData: Proposal[];
+  activeData: number[];
 };
 
 const ProposalTable = ({ activeData }: Props) => {
diff --git a/src/components/Proposal/index.tsx b/src/components/Proposal/index.tsx
index 2fea2d54..3a6ee141 100644
--- a/src/components/Proposal/index.tsx
+++ b/src/components/Proposal/index.tsx
@@ -1,10 +1,27 @@
+import { useQuery } from "react-query";
 import { NoContent } from "../TableNoContent";
-import { activeProposal } from "./fetchProposal";
 import ProposalTable from "./ProposalTable";
+import { QueryKeys } from "../../queries/keys";
+import { fetchLiveProposals } from "../../calls/liveProposals";
+import { LoadingAnimation } from "../Loading/Loading";
 
 export const Proposals = () => {
-  if (activeProposal.length === 0) {
+  const { isLoading, isError, data } = useQuery(
+    [QueryKeys.liveProposals],
+    fetchLiveProposals
+  );
+
+  if (isError) {
+    return <p>Something went wrong, please try again later.</p>;
+  }
+
+  if (isLoading || !data) {
+    return <LoadingAnimation />;
+  }
+
+  if (data.length === 0) {
     return <NoContent text="No proposals are currently live" />;
   }
-  return <ProposalTable activeData={activeProposal} />;
+
+  return <ProposalTable activeData={data} />;
 };
diff --git a/src/components/Vote/Vote.tsx b/src/components/Vote/Vote.tsx
index 34359a30..4fb32ce5 100644
--- a/src/components/Vote/Vote.tsx
+++ b/src/components/Vote/Vote.tsx
@@ -2,7 +2,6 @@ import { AccountInterface } from "starknet";
 
 import GovernanceAbi from "../../abi/amm_abi.json";
 import { GOVERNANCE_ADDRESS } from "../../constants/amm";
-import { Proposal } from "../../types/proposal";
 import { debug } from "../../utils/debugger";
 
 import styles from "./Vote.module.css";
@@ -86,7 +85,7 @@ const PropMessage = ({ link }: PropMessageProps) => {
 };
 
 type VoteProps = {
-  proposal: Proposal;
+  proposal: number;
   balance: bigint;
   account?: AccountInterface;
 };
@@ -94,8 +93,7 @@ type VoteProps = {
 export const Vote = ({ proposal, balance, account }: VoteProps) => {
   return (
     <div>
-      <PropMessage link={proposal.discordLink} />
-      <VoteButtons account={account} propId={proposal.id} balance={balance} />
+      <VoteButtons account={account} propId={proposal} balance={balance} />
     </div>
   );
 };
diff --git a/src/pages/governance.tsx b/src/pages/governance.tsx
index 2ed3156f..2d5fc4a4 100644
--- a/src/pages/governance.tsx
+++ b/src/pages/governance.tsx
@@ -15,7 +15,18 @@ const VotingSubpage = () => {
   return (
     <div>
       <h3>Proposals</h3>
-      <p>Vote on AMM defining proposals</p>
+      <p>Vote on AMM defining proposals.</p>
+      <p>
+        To find out more about the proposals and discuss, go to{" "}
+        <a
+          href="https://discord.com/channels/969228248552706078/1124013480123584622"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Proposals channel on Carmine Options AMM Discord
+        </a>
+        .
+      </p>
       <Proposals />
     </div>
   );
diff --git a/src/queries/keys.ts b/src/queries/keys.ts
index e4e372f3..809e6700 100644
--- a/src/queries/keys.ts
+++ b/src/queries/keys.ts
@@ -12,4 +12,5 @@ export enum QueryKeys {
   defiSpringClaimed = "DEFI_SPRING_CLAIMED",
   carmineStakes = "CARMINE_STAKES",
   airdropData = "AIRDROP_DATA",
+  liveProposals = "LIVE_PROPOSALS",
 }
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index b3246647..c374a943 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -1,6 +1,6 @@
 import { Contract } from "starknet";
 import AmmAbi from "../abi/amm_abi.json";
-import GovernanceAbi from "../abi/amm_abi.json";
+import GovernanceAbi from "../abi/governance_abi.json";
 import { AMM_ADDRESS, GOVERNANCE_ADDRESS } from "../constants/amm";
 import { provider } from "../network/provider";