WIP: Updates to enable basic `Commit Vote on Challenge' action

- Add `@joincivil/utils` to dApp `package.json` dependencies
- Add `commitVote` method to CivilTCR API lib
- Add very **very** basic UI elements to commit a vote on an open
application listing challenge

packages/dapp/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@joincivil/core": "^4.0.2",
     "@joincivil/editor": "1.1.4",
+    "@joincivil/utils": "^1.1.4",
     "@types/highlight.js": "^9.12.2",
     "bignumber.js": "~5.0.0",
     "highlight.js": "^9.12.0",

packages/dapp/src/apis/civilTCR.ts

@@ -1,6 +1,7 @@
 import BigNumber from "bignumber.js";
 import { getCivil } from "../helpers/civilInstance";
 import { TwoStepEthTransaction, EthAddress } from "@joincivil/core";
+import { getVoteSaltHash } from "@joincivil/utils";
 
 export async function approveForChallenge(): Promise<TwoStepEthTransaction | void> {
   const civil = getCivil();
@@ -58,3 +59,18 @@ export async function getNewsroom(address: EthAddress): Promise<any> {
   newsroom = await civil.newsroomAtUntrusted(address);
   return newsroom;
 }
+
+export async function commitVote(
+  pollID: BigNumber,
+  voteOption: BigNumber,
+  salt: BigNumber,
+  numTokens: BigNumber,
+): Promise<TwoStepEthTransaction> {
+  const civil = getCivil();
+  const tcr = civil.tcrSingletonTrusted();
+  const secretHash = getVoteSaltHash(voteOption.toString(), salt.toString());
+  const voting = tcr.getVoting();
+  const prevPollID = await voting.getPrevPollID(numTokens);
+
+  return voting.commitVote(pollID, secretHash, numTokens, prevPollID);
+}

packages/dapp/src/components/listing/ChallengeDetail.tsx

@@ -20,14 +20,27 @@ const StyledDiv = styled.div`
   color: black;
 `;
 
+const FormValidationMessage = styled.div`
+  color: #c00;
+  font-weight: bold;
+`;
+
 export interface ChallengeDetailProps {
   listingAddress: EthAddress;
   challenge: ChallengeData;
 }
 
-class ChallengeDetail extends React.Component<ChallengeDetailProps> {
+export interface ChallengeDetailState {
+  isVoteTokenAmtValid: boolean;
+}
+
+class ChallengeDetail extends React.Component<ChallengeDetailProps, ChallengeDetailState> {
   constructor(props: any) {
     super(props);
+
+    this.state = {
+      isVoteTokenAmtValid: false
+    };
   }
 
   public render(): JSX.Element {
@@ -57,7 +70,36 @@ class ChallengeDetail extends React.Component<ChallengeDetailProps> {
   }
 
   private renderCommitStage(): JSX.Element {
-    return <>COMMIT THINGS</>;
+    return (
+      <>
+        <h3>Vote On Challenge</h3>
+
+        <label>Poll ID</label>
+        <input type="text" name="" />
+
+        <label>Vote Option</label>
+        <input type="radio" value="0" name="" /> Yes
+        <input type="radio" value="1" name="" /> No
+
+        <label>Salt</label>
+        <input type="text" name="" />
+
+        <label>Number of Tokens</label>
+        {!this.state.isVoteTokenAmtValid && <FormValidationMessage children="Please enter a valid token amount" />}
+        <input type="text" name="" onBlur={this.validateVoteCommittedTokens.bind(this)} />
+
+        <TransactionButton firstTransaction={this.commitVoteOnChallenge}>
+          Commit Vote
+        </TransactionButton>
+      </>
+    );
+  }
+  // @TODO/jon: Make a nicer validation check than this. But for
+  // the meantime, let's do this just to see if this whole thing works.
+  private validateVoteCommittedTokens(event: any): void {
+    const val: string = event.target.value;
+    const isValidTokenAmt: boolean = !!val.length && parseInt(val, 10) > 0;
+    this.setState({ isVoteTokenAmtValid: isValidTokenAmt })
   }
   private renderRevealStage(): JSX.Element {
     return <>REVEAL THINGS</>;
@@ -69,6 +111,11 @@ class ChallengeDetail extends React.Component<ChallengeDetailProps> {
       </TransactionButton>
     );
   }
+
+  private commitVoteOnChallenge = async (): Promise<TwoStepEthTransaction<any>> => {
+    return appealChallenge(this.props.listingAddress);
+  };
+
   private appeal = async (): Promise<TwoStepEthTransaction<any>> => {
     return appealChallenge(this.props.listingAddress);
   };