Gov Improvements

src/hooks/useProposal.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { ethers } from "ethers";
+import toast from "react-hot-toast";
 import { GOV_INSTRUCTIONS_CONTRACT, GOVERNANCE_CONTRACT } from "src/constants/contracts";
 import { parseBigNumber, stringToBytes32String } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
@@ -16,6 +17,7 @@ import {
  useGetProposalURIFromEvent,
 } from "src/hooks/useProposals";
 import { useVotingCollateralMinimum, useVotingCollateralRequirement, useVotingSupply } from "src/hooks/useVoting";
+import { queryClient } from "src/lib/react-query";
 import { InstructionStructOutput } from "src/typechain/OlympusGovInstructions";
 import { useNetwork, useSigner } from "wagmi";
 
@@ -47,6 +49,7 @@ export const useProposal = (instructionsIndex: number) => {
  const { data: metadata, isFetched: metadataIsFetched } = useQuery(
  ["GetProposalMetadata", instructionsIndex],
  async () => {
+ console.log("GetProposalMetadata", instructionsIndex);
  return await contract.getProposalMetadata(instructionsIndex);
  },
  );
@@ -106,6 +109,7 @@ export const useProposal = (instructionsIndex: number) => {
  noVotes,
  uri: discussionURL,
  content,
+ now: new Date(),
  };
 
  return currentProposal;
@@ -165,17 +169,27 @@ export const useSubmitProposal = () => {
  const { data: signer } = useSigner();
 
  // TODO(appleseed): update ANY types below
- return useMutation<any, Error, { proposal: ISubmitProposal }>(async ({ proposal }: { proposal: ISubmitProposal }) => {
- if (!signer) throw new Error(`Signer is not set`);
+ return useMutation<any, Error, { proposal: ISubmitProposal }>(
+ async ({ proposal }: { proposal: ISubmitProposal }) => {
+ if (!signer) throw new Error(`Signer is not set`);
 
- // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
- await contract.connect(signer).submitProposal(
- proposal.instructions,
- ethers.utils.formatBytes32String(stringToBytes32String(proposal.name)),
- // TODO(appleseed): add back in name after contract update
- proposal.proposalURI,
- );
- });
+ // NOTE(appleseed): proposal.name is limited 31 characters, but full proposal name is uploaded in metadata via useIPFSUpload
+ const transaction = await contract.connect(signer).submitProposal(
+ proposal.instructions,
+ ethers.utils.formatBytes32String(stringToBytes32String(proposal.name)),
+ // TODO(appleseed): add back in name after contract update
+ proposal.proposalURI,
+ );
+ const response = await transaction.wait();
+ return response;
+ },
+ {
+ onSuccess: () => {
+ toast("Successfully Submitted Proposal");
+ queryClient.invalidateQueries({ queryKey: ["GetProposalSubmittedEvents", chain.id] });
+ },
+ },
+ );
 };
 
 export const useIPFSUpload = () => {

src/hooks/useProposals.ts

@@ -42,6 +42,7 @@ export interface IAnyProposal extends Omit<Proposal, "isActive"> {
  nextDeadline: number;
  collateralClaimableAt: number;
  isActive: boolean | undefined;
+ now: Date;
 }
 
 export interface IActiveProposal {

src/views/Governance/Governance.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import { Paper } from "@olympusdao/component-library";
 import { Route, Routes } from "react-router-dom";
+import PageTitle from "src/components/PageTitle";
 import { CreateProposal } from "src/views/Governance/components/CreateProposal";
 import { ProposalPage } from "src/views/Governance/components/ProposalPage";
 import { VotingPower, VotingPowerMetrics } from "src/views/Governance/components/ProposalPage/components/VotingPower";
@@ -9,6 +10,7 @@ import { ProposalsDashboard } from "src/views/Governance/ProposalsDashboard";
 export const Governance = () => {
  return (
  <>
+ <PageTitle name="Governance" />
  <Box display="flex" justifyContent="center" width="100%">
  <Paper>
  <VotingPowerMetrics />

src/views/Governance/components/CreateProposal/CreateProposal.tsx

@@ -3,6 +3,7 @@ import { Paper, PrimaryButton } from "@olympusdao/component-library";
 import MDEditor from "@uiw/react-md-editor";
 import { ethers } from "ethers";
 import { FC, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import rehypeSanitize from "rehype-sanitize";
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
 import { GOVERNANCE_ADDRESSES, VOTE_TOKEN_ADDRESSES } from "src/constants/addresses";
@@ -28,6 +29,7 @@ export const CreateProposal = () => {
  // TODO(appleseed): need to allow multiple instructions
  const [proposalAction, setProposalAction] = useState<ProposalAction>(ProposalAction.InstallModule);
  const [proposalContract, setProposalContract] = useState<string>();
+ const navigate = useNavigate();
 
  const StyledInputLabel = styled(InputLabel)(() => ({
  lineHeight: "24px",
@@ -91,7 +93,14 @@ export const CreateProposal = () => {
  const proposalURI = `ipfs://${fileData.path}`;
  // TODO(appleseed): need to allow multiple instructions
  const instructions = [{ action: proposalAction as ProposalAction, target: proposalContract as string }];
- submitProposal.mutate({ proposal: { name: proposal.name, instructions, proposalURI } });
+ submitProposal.mutate(
+ { proposal: { name: proposal.name, instructions, proposalURI } },
+ {
+ onSuccess: () => {
+ navigate("/governance");
+ },
+ },
+ );
  } else {
  // TODO(appleseed): there was a problem uploading your proposal to IPFS
  }
@@ -143,7 +152,7 @@ export const CreateProposal = () => {
  approvalPendingText={"Confirming Approval in your wallet"}
  isVertical
  >
- <PrimaryButton disabled={!canSubmit()} onClick={handleFormSubmission}>
+ <PrimaryButton disabled={!canSubmit()} onClick={handleFormSubmission} loading={submitProposal.isLoading}>
  {submitProposal.isLoading ? "Submitting..." : "Continue"}
  </PrimaryButton>
  </TokenAllowanceGuard>

src/views/Governance/components/ProposalPage/ProposalPage.tsx

@@ -64,8 +64,10 @@ const TimeRemaining = ({ proposal }: { proposal: IAnyProposal }) => {
  // const now = 1668456906000; // must be activated within 1 minute
  // const now = 1668456816000; // can be activated in 3 minutes
  const now = Date.now();
- if (proposal.timeRemaining && proposal.timeRemaining > 0) {
- boundedTimeRemaining = proposal.timeRemaining / 1000;
+ const timeRemainingDate = proposal.now.getTime() + proposal.timeRemaining;
+ if (proposal.timeRemaining && timeRemainingDate - now > 0) {
+ const timeRemainingDate = proposal.now.getTime() + proposal.timeRemaining;
+ boundedTimeRemaining = (timeRemainingDate - now) / 1000;
  }
 
  console.log(