Merge pull request #199 from CarmineOptions/feature/live-proposals

feat: live proposals

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;
+};

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>

src/components/Proposal/ProposalTable.tsx

@@ -1,12 +1,11 @@
-import { Proposal } from "../../types/proposal";
 import { ProposalItem } from "./ProposalItem";
 import { useAccount } from "../../hooks/useAccount";
 import { useState, useEffect } from "react";
 import { balanceOfCarmineToken } from "../../calls/balanceOf";
 import styles from "./Proposal.module.css";
 
 type Props = {
-  activeData: Proposal[];
+  activeData: number[];
 };
 
 const ProposalTable = ({ activeData }: Props) => {

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} />;
 };

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,16 +85,15 @@ const PropMessage = ({ link }: PropMessageProps) => {
 };
 
 type VoteProps = {
-  proposal: Proposal;
+  proposal: number;
   balance: bigint;
   account?: AccountInterface;
 };
 
 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>
   );
 };

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>
   );

src/queries/keys.ts

@@ -12,4 +12,5 @@ export enum QueryKeys {
   defiSpringClaimed = "DEFI_SPRING_CLAIMED",
   carmineStakes = "CARMINE_STAKES",
   airdropData = "AIRDROP_DATA",
+  liveProposals = "LIVE_PROPOSALS",
 }

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";