Merge branch 'master' into walfly/newsroom-manager-supports-txhash-load

packages/components/src/ListingDetailPhaseCard/ChallengeRequestAppealCard.tsx

@@ -8,7 +8,8 @@ import {
   MetaItemLabel,
   CTACopy,
 } from "./styledComponents";
-import { buttonSizes, InvertedButton } from "../Button";
+import { buttonSizes } from "../Button";
+import { TransactionInvertedButton } from "../TransactionButton";
 import { ProgressBarCountdownTimer } from "../PhaseCountdown/";
 import { ChallengeResults } from "./ChallengeResults";
 
@@ -42,7 +43,9 @@ export class ChallengeRequestAppealCard extends React.Component<
         </StyledListingDetailPhaseCardSection>
         <StyledListingDetailPhaseCardSection>
           <CTACopy>If you disagree with the community, you may request an appeal to the Civil Council.</CTACopy>
-          <InvertedButton size={buttonSizes.MEDIUM}>Request Appeal from Civil Council</InvertedButton>
+          <TransactionInvertedButton size={buttonSizes.MEDIUM} transactions={this.props.transactions!}>
+            Request Appeal from Civil Council
+          </TransactionInvertedButton>
         </StyledListingDetailPhaseCardSection>
       </StyledListingDetailPhaseCardContainer>
     );

packages/components/src/ListingDetailPhaseCard/ChallengeResults.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import styled, { StyledComponentClass } from "styled-components";
 import { colors } from "../styleConstants";
-import { getNumberStringWithCommaDelimeters } from "@joincivil/utils";
 import { buttonSizes, DarkButton } from "../Button";
 import { InputGroup, TextInput } from "../input/";
 import { FormHeader } from "./styledComponents";
@@ -83,7 +82,7 @@ export class ChallengeResults extends React.Component<ChallengeResultsProps> {
             <VotesPerTokenVote vote="remain">
               <span>✔</span> Remain
             </VotesPerTokenVote>
-            <VotesPerTokenCount>{getNumberStringWithCommaDelimeters(this.props.votesAgainst)} CVL</VotesPerTokenCount>
+            <VotesPerTokenCount>{this.props.votesAgainst}</VotesPerTokenCount>
           </VotesPerTokenContainer>
 
           <BreakdownBarContainer>
@@ -99,7 +98,7 @@ export class ChallengeResults extends React.Component<ChallengeResultsProps> {
             <VotesPerTokenVote vote="remove">
               <span>✖</span> Remove
             </VotesPerTokenVote>
-            <VotesPerTokenCount>{getNumberStringWithCommaDelimeters(this.props.votesFor)} CVL</VotesPerTokenCount>
+            <VotesPerTokenCount>{this.props.votesFor}</VotesPerTokenCount>
           </VotesPerTokenContainer>
 
           <BreakdownBarContainer>
@@ -113,7 +112,7 @@ export class ChallengeResults extends React.Component<ChallengeResultsProps> {
         <VoteTypeSummary>
           <VotesPerTokenContainer>
             <VotesPerTokenTotal>Total Votes</VotesPerTokenTotal>
-            <VotesPerTokenCount>{getNumberStringWithCommaDelimeters(this.props.totalVotes)}</VotesPerTokenCount>
+            <VotesPerTokenCount>{this.props.totalVotes}</VotesPerTokenCount>
           </VotesPerTokenContainer>
 
           <BreakdownBarContainer>

packages/components/src/ListingDetailPhaseCard/CommitVote.tsx

@@ -87,7 +87,7 @@ export class CommitVote extends React.Component<CommitVoteProps, CommitVoteState
   };
 
   private renderSaltInput = (): JSX.Element => {
-    let label = "Enter your salt phrase";
+    let label = "Enter a number to use as your salt";
     let className;
 
     if (this.state.saltError) {
@@ -98,7 +98,7 @@ export class CommitVote extends React.Component<CommitVoteProps, CommitVoteState
       <TextInput
         label={label}
         className={className}
-        placeholder="Salt"
+        placeholder="Enter a unique number"
         value={this.props.salt}
         name="salt"
         onChange={this.onChange}
@@ -130,6 +130,7 @@ export class CommitVote extends React.Component<CommitVoteProps, CommitVoteState
   };
 
   private validateSalt = (): boolean => {
+    console.log("validate salt", this.props);
     let isValid = true;
 
     if (!this.props.salt || this.props.salt.length === 0) {
@@ -145,6 +146,7 @@ export class CommitVote extends React.Component<CommitVoteProps, CommitVoteState
   };
 
   private validateNumTokens = (): boolean => {
+    console.log("validate num tokens", this.props);
     const numTokens = !this.props.numTokens ? 0 : parseInt(this.props.numTokens as string, 10);
     let isValid = true;
 
@@ -153,11 +155,14 @@ export class CommitVote extends React.Component<CommitVoteProps, CommitVoteState
       this.setState({
         numTokensError: "Please enter a valid token vote amount",
       });
-    } else if (numTokens > this.props.tokenBalance) {
-      isValid = false;
-      this.setState({
-        numTokensError: "Token vote amount exceeds your balance",
-      });
+
+      // @TODO(jon): Add client-side validation that checks that
+      // numTokens <= this.props.tokenBalance. Though this may
+      // not be needed if we change to a slider UI element or
+      // when we implement pre-approving tokens for voting
+      // If we do client-side validation, we'd want to do
+      // something like:
+      // `this.setState({ numTokensError: "Token vote amount exceeds your balance" });`
     } else {
       this.setState({ numTokensError: undefined });
     }

packages/components/src/ListingDetailPhaseCard/ListingDetailsPhaseCard.stories.tsx

@@ -52,8 +52,11 @@ let commitVoteState = {
   voteOption: undefined,
 };
 
-function commitVoteChange(data: any): void {
+function commitVoteChange(data: any, callback?: () => any): void {
   commitVoteState = { ...commitVoteState, ...data };
+  if (callback) {
+    callback();
+  }
 }
 
 storiesOf("Listing Details Phase Card", module)

packages/components/src/ListingDetailPhaseCard/RevealVote.tsx

@@ -17,7 +17,7 @@ export class RevealVote extends React.Component<RevealVoteProps> {
           voted for this challenge.
         </FormCopy>
 
-        <TextInput label="Enter your salt" placeholder="Enter a value" name="salt" onChange={this.onChange} />
+        <TextInput label="Enter your salt" placeholder="Salt" name="salt" onChange={this.onChange} />
 
         <VoteOptionsContainer>
           <div onMouseEnter={this.setVoteToRemain}>

packages/components/src/ListingDetailPhaseCard/index.ts

@@ -3,6 +3,7 @@ export * from "./ChallengeCommitVoteCard";
 export * from "./ChallengeRevealVoteCard";
 export * from "./ChallengeRequestAppealCard";
 export * from "./ChallengeResolveCard";
+export * from "./ChallengeResults";
 export * from "./AppealAwaitingDecisionCard";
 export * from "./AppealDecisionCard";
 export * from "./AppealChallengeCommitVoteCard";

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

@@ -18,6 +18,7 @@ import {
   ChallengeRevealVoteCard,
   ChallengeRequestAppealCard,
   ChallengeResolveCard,
+  ChallengeResults,
 } from "@joincivil/components";
 import AppealDetail from "./AppealDetail";
 import ChallengeRewardsDetail from "./ChallengeRewardsDetail";
@@ -26,6 +27,11 @@ import BigNumber from "bignumber.js";
 import { State } from "../../reducers";
 import { fetchAndAddChallengeData } from "../../actionCreators/challenges";
 import { getFormattedTokenBalance } from "@joincivil/utils";
+import styled from "styled-components";
+
+const StyledChallengeResults = styled.div`
+  width: 460px;
+`;
 
 export interface ChallengeContainerProps {
   listingAddress: EthAddress;
@@ -176,36 +182,54 @@ class ChallengeDetail extends React.Component<ChallengeDetailProps, ChallengeVot
     const endTime = this.props.challenge.requestAppealExpiry.toNumber();
     const phaseLength = this.props.govtParameters.requestAppealLen;
     const transactions = [{ transaction: approveForAppeal }, { transaction: this.appeal }];
-    const totalVotes = challenge.poll.votesAgainst.add(challenge.poll.votesFor);
-    const votesFor = challenge.poll.votesFor;
-    const votesAgainst = challenge.poll.votesFor;
-    const percentFor = challenge.poll.votesFor.div(totalVotes).mul(100);
-    const percentAgainst = challenge.poll.votesAgainst.div(totalVotes).mul(100);
+    const totalVotes = challenge.poll.votesAgainst.add(challenge.poll.votesFor).toString();
+    const votesFor = getFormattedTokenBalance(challenge.poll.votesFor);
+    const votesAgainst = getFormattedTokenBalance(challenge.poll.votesAgainst);
+    const percentFor = challenge.poll.votesFor
+      .div(totalVotes)
+      .mul(100)
+      .toFixed(0);
+    const percentAgainst = challenge.poll.votesAgainst
+      .div(totalVotes)
+      .mul(100)
+      .toFixed(0);
     return (
       <ChallengeRequestAppealCard
         endTime={endTime}
         phaseLength={phaseLength}
         transactions={transactions}
-        totalVotes={totalVotes.toString()}
-        votesFor={votesFor.toString()}
-        votesAgainst={votesAgainst.toString()}
-        percentFor={percentFor.toString()}
-        percentAgainst={percentAgainst.toString()}
+        totalVotes={totalVotes}
+        votesFor={votesFor}
+        votesAgainst={votesAgainst}
+        percentFor={percentFor}
+        percentAgainst={percentAgainst}
       />
     );
   }
   private renderVoteResult(): JSX.Element {
-    const totalVotes = this.props.challenge.poll.votesAgainst.add(this.props.challenge.poll.votesFor);
-    const percentFor = this.props.challenge.poll.votesFor.div(totalVotes).mul(100);
-    const percentAgainst = this.props.challenge.poll.votesAgainst.div(totalVotes).mul(100);
+    const challenge = this.props.challenge;
+    const totalVotes = challenge.poll.votesAgainst.add(challenge.poll.votesFor);
+    const votesFor = getFormattedTokenBalance(challenge.poll.votesFor);
+    const votesAgainst = getFormattedTokenBalance(challenge.poll.votesAgainst);
+    const percentFor = challenge.poll.votesFor
+      .div(totalVotes)
+      .mul(100)
+      .toFixed(0);
+    const percentAgainst = challenge.poll.votesAgainst
+      .div(totalVotes)
+      .mul(100)
+      .toFixed(0);
+    console.log(challenge);
     return (
-      <>
-        Result:
-        <br />
-        Reject: {this.props.challenge.poll.votesFor.toString() + " CVL"} - {percentFor.toString() + "%"}
-        <br />
-        Allow: {this.props.challenge.poll.votesAgainst.toString() + " CVL"} - {percentAgainst.toString() + "%"}
-      </>
+      <StyledChallengeResults>
+        <ChallengeResults
+          totalVotes={getFormattedTokenBalance(totalVotes)}
+          votesFor={votesFor.toString()}
+          votesAgainst={votesAgainst.toString()}
+          percentFor={percentFor.toString()}
+          percentAgainst={percentAgainst.toString()}
+        />
+      </StyledChallengeResults>
     );
   }
   private renderRewardsDetail(): JSX.Element {
@@ -229,8 +253,12 @@ class ChallengeDetail extends React.Component<ChallengeDetailProps, ChallengeVot
     );
   }
 
-  private updateCommitVoteState = (data: any): void => {
-    this.setState({ ...data });
+  private updateCommitVoteState = (data: any, callback?: () => void): void => {
+    if (callback) {
+      this.setState({ ...data }, callback);
+    } else {
+      this.setState({ ...data });
+    }
   };
 
   private appeal = async (): Promise<TwoStepEthTransaction<any>> => {
@@ -372,17 +400,23 @@ class ChallengeResolveContainer extends React.Component<
     }
 
     const totalVotes = challenge.poll.votesAgainst.add(challenge.poll.votesFor);
-    const votesFor = challenge.poll.votesFor;
-    const votesAgainst = challenge.poll.votesFor;
-    const percentFor = challenge.poll.votesFor.div(totalVotes).mul(100);
-    const percentAgainst = challenge.poll.votesAgainst.div(totalVotes).mul(100);
+    const votesFor = getFormattedTokenBalance(challenge.poll.votesFor);
+    const votesAgainst = getFormattedTokenBalance(challenge.poll.votesAgainst);
+    const percentFor = challenge.poll.votesFor
+      .div(totalVotes)
+      .mul(100)
+      .toFixed(0);
+    const percentAgainst = challenge.poll.votesAgainst
+      .div(totalVotes)
+      .mul(100)
+      .toFixed(0);
 
     return (
       <ChallengeResolveCard
         challenger={challenge!.challenger.toString()}
         rewardPool={getFormattedTokenBalance(challenge!.rewardPool)}
         stake={getFormattedTokenBalance(challenge!.stake)}
-        totalVotes={totalVotes.toString()}
+        totalVotes={getFormattedTokenBalance(totalVotes)}
         votesFor={votesFor.toString()}
         votesAgainst={votesAgainst.toString()}
         percentFor={percentFor.toString()}