Add duration options for new proposals

client/src/components/Proposals.jsx

@@ -30,6 +30,7 @@ function Proposals() {
   const [proposals, dispatchProposal] = useList();
   const proposalsContract = useRef();
   const [showAddProposal, setShowAddProposal] = useState(false);
+  const [durations, setDurations] = useState([]);
 
   const fetchProposal = useCallback(async (proposalIndex) => {
     const proposal = await proposalsContract.current.methods.proposals(proposalIndex).call();
@@ -85,16 +86,24 @@ function Proposals() {
     };
   }, [provider, chainId, proposalsContract, fetchProposals, fetchProposal]);
 
-  const handleShowAddProposal = () => setShowAddProposal(true);
+  const handleShowAddProposal = (duration0, duration1, duration2) => {
+    setDurations([duration0, duration1, duration2]);
+    setShowAddProposal(true);
+  };
 
   const onSubmitProposal = useCallback(async (post) => {
     // TODO: Make referenda durations configurable
-    await proposalsContract.current.methods.propose(post.hash, 20, 40, 60).send({
+    await proposalsContract.current.methods.propose(
+      post.hash,
+      durations[0],
+      durations[1],
+      durations[2],
+    ).send({
       from: account,
       gas: 1000000,
       value: 10000,
     });
-  }, [account, proposalsContract]);
+  }, [account, proposalsContract, durations]);
 
   const handleAttest = useCallback(async (proposalIndex) => {
     await proposalsContract.current.methods.attest(proposalIndex, reputation).send({
@@ -142,10 +151,29 @@ function Proposals() {
   };
   return (
     <>
-      <AddPostModal title="New Proposal" show={showAddProposal} setShow={setShowAddProposal} onSubmit={onSubmitProposal} />
+      <AddPostModal
+        title="New Proposal"
+        show={showAddProposal}
+        setShow={setShowAddProposal}
+        onSubmit={onSubmitProposal}
+      />
+
+      <AddPostModal
+        title="New Proposal: 20/30/40s"
+        show={showAddProposal}
+        setShow={setShowAddProposal}
+        onSubmit={onSubmitProposal}
+      />
+
       <h2>Proposals</h2>
       <div>
-        <Button onClick={handleShowAddProposal}>New Proposal</Button>
+        <Stack direction="horizontal">
+          <Button onClick={() => handleShowAddProposal(20, 30, 40)}>New Proposal: 20/30/40s</Button>
+          <Button onClick={() => handleShowAddProposal(60, 60, 60)}>New Proposal: 1/1/1m</Button>
+          <Button onClick={() => handleShowAddProposal(15 * 60, 2 * 3600, 2 * 86400)}>
+            New Proposal: 15m/2h/2d
+          </Button>
+        </Stack>
       </div>
       <div>
         <table className="table">