add: optimistic in ProposalCreation

src/components/Proposals/ProposalCreation/CreateProposalForm.tsx

@@ -12,7 +12,7 @@ import StandardForm from "./StandardForm";
 import SubmitButton from "./SubmitButton";
 
 type FormValues = {
-  proposalType: "Basic" | "Approval";
+  proposalType: "Basic" | "Approval" | "Optimistic";
   proposalSettings: string;
   title: string;
   description: string;
@@ -60,7 +60,6 @@ export default function CreateProposalForm({
   const form = useForm<FormValues>(() => initialFormValues);
   const formTarget = useRef<HTMLFormElement>(null);
 
-  console.log(form.state.proposalType);
   return (
     <VStack className="w-full">
       <form ref={formTarget}>

src/components/Proposals/ProposalCreation/ProposalTypeRow.tsx

@@ -11,6 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useEffect } from "react";
 
 function ProposalTypeRow({
   form,
@@ -20,10 +21,32 @@ function ProposalTypeRow({
   proposalSettingsList: any[];
 }) {
   const { proposalType, proposalSettings } = form.state;
-  const infoText =
-    proposalType === "Basic"
-      ? "A basic proposal is one where voters will be asked to vote for, against, or abstain. The proposal will pass if the abstain and for votes exceeed quorum AND if the for votes exceed the approval threshold."
-      : "An approval vote is one where voters will be asked to choose among multiple options. If the proposal passes quorum, then options will be approved according to your selected approval criteria.";
+  const optimisticProposalSettingsIndex = proposalSettingsList.findIndex(
+    (item) => item.name === "Optimistic"
+  );
+  const infoText = () => {
+    switch (proposalType) {
+      case "Basic":
+        return "A basic proposal is one where voters will be asked to vote for, against, or abstain. The proposal will pass if the abstain and for votes exceeed quorum AND if the for votes exceed the approval threshold.";
+      case "Optimistic":
+        return "An optimistic vote is one where voters will be asked to vote for, against, or abstain. The proposal will automatically pass unless 50% vote against. Since no transaction can be proposed for optimistic proposals, it can only be used for social signalling.";
+      case "Approval":
+        return "An approval vote is one where voters will be asked to choose among multiple options. If the proposal passes quorum, then options will be approved according to your selected approval criteria.";
+    }
+  };
+
+  useEffect(() => {
+    if (proposalType === "Optimistic") {
+      form.onChange.proposalSettings(
+        optimisticProposalSettingsIndex.toString()
+      );
+    } else if (
+      proposalSettings === optimisticProposalSettingsIndex.toString()
+    ) {
+      form.onChange.proposalSettings("0");
+    }
+  }, [proposalType]);
+
   return (
     <VStack className={styles.type_row}>
       <HStack
@@ -34,31 +57,40 @@ function ProposalTypeRow({
         <div className={styles.type_row__left}>
           <h4 className={styles.input_heading}>Vote type</h4>
           <Switch
-            options={["Basic", "Approval"]}
+            options={["Basic", "Approval", "Optimistic"]}
             selection={proposalType}
             onSelectionChanged={form.onChange.proposalType}
           />
         </div>
         <div className={styles.type_row__right}>
           <h4 className={styles.input_heading}>Proposal type</h4>
           <Select
+            value={proposalSettings}
             onValueChange={form.onChange.proposalSettings}
             defaultValue={"0"}
+            disabled={proposalType === "Optimistic"}
           >
             <SelectTrigger className="w-full">
               <SelectValue placeholder={proposalSettingsList[0].name} />
             </SelectTrigger>
             <SelectContent>
-              {proposalSettingsList.map((item, index) => (
-                <SelectItem key={index} value={index.toString()}>
-                  {item.name}
-                </SelectItem>
-              ))}
+              {proposalSettingsList
+                // Show optimistic settings only when optimistic vote type is selected
+                .filter(
+                  (proposalSettings) =>
+                    proposalType === "Optimistic" ||
+                    proposalSettings.name != "Optimistic"
+                )
+                .map((item, index) => (
+                  <SelectItem key={index} value={index.toString()}>
+                    {item.name}
+                  </SelectItem>
+                ))}
             </SelectContent>
           </Select>
         </div>
       </HStack>
-      <div className={styles.type_row__text}>{infoText}</div>
+      <div className={styles.type_row__text}>{infoText()}</div>
     </VStack>
   );
 }

src/components/Proposals/ProposalCreation/SubmitButton.tsx

@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button";
 import {
   OptimismContracts,
   approvalModuleAddress,
+  optimisticModuleAddress,
 } from "@/lib/contracts/contracts";
 import { useOpenDialog } from "@/components/Dialogs/DialogProvider/DialogProvider";
 import { useAccount, useContractWrite, usePrepareContractWrite } from "wagmi";
@@ -201,6 +202,19 @@ function getInputData(form: Form): {
         description,
         proposalSettings,
       ];
+    } else if (form.state.proposalType === "Optimistic") {
+      // if OPTIMISTIC proposal, format data for optimistic proposal
+      governorFunction = "proposeWithModule";
+
+      // 50% of votable supply
+      const settings = [5_000, true];
+
+      inputData = [
+        optimisticModuleAddress,
+        abiCoder.encode(["tuple(uint248,bool)"], [settings]),
+        description,
+        proposalSettings,
+      ];
     }
   } catch (e) {
     console.error(e);