improve preboostable logic, feedback and layout (#1482)

* fixes * cleanup logic, improve layout, add feedback * Undo change in use of !expired * remove unneeded parens * lint * added item to changelog
daostack · Mar 13, 2020 · a6c3774 · a6c3774
1 parent 8acaf0a
commit a6c3774
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 71 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,8 @@
 ## 0.10.1
 
   - Features Added
+    - improved display of the spinning busy icon
+    - improved some display of staking/preboosting amounts feedback
 
   - Bugs Fixed
     - hide trailing slash in PreTransaction modal header

diff --git a/src/components/Proposal/ActionButton.tsx b/src/components/Proposal/ActionButton.tsx
@@ -230,13 +230,13 @@ class ActionButton extends React.Component<IProps, IState> {
           /> : ""
         }
 
-        { proposalState.stage === IProposalStage.Queued && proposalState.upstakeNeededToPreBoost.lt(new BN(0)) ?
+        { proposalState.stage === IProposalStage.Queued && proposalState.upstakeNeededToPreBoost.ltn(0) ?
           <button className={css.preboostButton} onClick={this.handleClickExecute("Pre-Boost")} data-test-id="buttonBoost">
             <img src="/assets/images/Icon/boost.svg"/>
             { /* space after <span> is there on purpose */ }
             <span> Pre-Boost</span>
           </button> :
-          proposalState.stage === IProposalStage.PreBoosted && expired && proposalState.downStakeNeededToQueue.lte(new BN(0)) ?
+          proposalState.stage === IProposalStage.PreBoosted && expired && proposalState.downStakeNeededToQueue.lten(0) ?
             <button className={css.unboostButton} onClick={this.handleClickExecute("Un-boost")} data-test-id="buttonBoost">
               <img src="/assets/images/Icon/boost.svg"/>
               <span> Un-Boost</span>

diff --git a/src/components/Proposal/Staking/BoostAmount.tsx b/src/components/Proposal/Staking/BoostAmount.tsx
@@ -1,12 +1,11 @@
+import { formatTokens } from "lib/util";
 import { IProposalStage, IProposalState } from "@daostack/client";
 
-import BN = require("bn.js");
 import classNames from "classnames";
-import { formatTokens } from "lib/util";
 import * as React from "react";
-
 import * as css from "./BoostAmount.scss";
 
+
 interface IProps {
   detailView?: boolean;
   expired?: boolean;
@@ -26,32 +25,33 @@ export default class BoostAmount extends React.Component<IProps, null> {
       [css.wrapper]: true,
       [css.detailView]: detailView,
     });
+    const nothing = <span className={css.boostedAmount}><b>&nbsp;</b></span>;
 
     return (
       <div className={wrapperClass}>
         {
-          proposal.stage === IProposalStage.Queued && !expired && proposal.upstakeNeededToPreBoost.gte(new BN(0)) ?
+          proposal.stage === IProposalStage.Queued && !expired && proposal.upstakeNeededToPreBoost.gten(0) ?
             <span className={css.boostedAmount}>
               <b>
                 {detailView ? <img src="/assets/images/Icon/Boost-slate.svg" /> : ""}
-                &gt; {formatTokens(proposal.upstakeNeededToPreBoost, "GEN")} to boost
+                &gt; {formatTokens(proposal.upstakeNeededToPreBoost, "GEN")} on Pass to boost
               </b>
             </span>
-            : proposal.stage === IProposalStage.PreBoosted && proposal.downStakeNeededToQueue.lte(new BN(0)) ?
+            : proposal.stage === IProposalStage.PreBoosted && proposal.downStakeNeededToQueue.lten(0) ?
               <span className={css.boostedAmount}>
                 <b>
                   {detailView ? <img src="/assets/images/Icon/Boost-slate.svg" /> : ""}
-                &gt; {formatTokens(proposal.downStakeNeededToQueue.abs(), "GEN")} Pass to stay boosted
+                &gt; {formatTokens(proposal.downStakeNeededToQueue.abs(), "GEN")} on Pass to stay boosted
                 </b>
               </span>
-              : proposal.stage === IProposalStage.PreBoosted && proposal.downStakeNeededToQueue.gt(new BN(0)) ?
+              : proposal.stage === IProposalStage.PreBoosted && proposal.downStakeNeededToQueue.gtn(0) ?
                 <span className={css.boostedAmount + " " + css.unboostAmount}>
                   <b>
                     {detailView ? <img src="/assets/images/Icon/Boost-slate.svg" /> : ""}
-                    {formatTokens(proposal.downStakeNeededToQueue, "GEN")} on Fail to un-boost
+                &gt;=  {formatTokens(proposal.downStakeNeededToQueue, "GEN")} on Fail to un-boost
                   </b>
                 </span>
-                : <span className={css.boostedAmount}><b>&nbsp;</b></span>
+                : nothing
         }
       </div>
     );

diff --git a/src/components/Proposal/Staking/StakeButtons.scss b/src/components/Proposal/Staking/StakeButtons.scss
@@ -1,12 +1,13 @@
 .predictions {
-  .stakesFor span, .stakesAgainst span {
+  .stakesFor span,
+  .stakesAgainst span {
     width: 50px;
   }
 
   span {
     text-align: left;
     display: inline-block;
-    color: rgba(104, 154, 214, 1.000);
+    color: rgba(104, 154, 214, 1);
     min-width: 3%;
     font-size: 13px;
 
@@ -28,8 +29,8 @@
 
   button {
     font-weight: $bold;
-    color: rgba(3, 118, 255, 1.000);
-    background-color: rgba(225, 235, 247, 1.000);
+    color: rgba(3, 118, 255, 1);
+    background-color: rgba(225, 235, 247, 1);
     height: 25px;
     line-height: 14px;
     position: relative;
@@ -58,7 +59,6 @@
   }
 
   button.pendingPrediction {
-
     strong {
       opacity: 0;
     }
@@ -88,7 +88,7 @@
       button {
         border: 1px solid $black-tenthtone;
         color: $black-halftone;
-        transition: all .25s ease;
+        transition: all 0.25s ease;
 
         &:hover {
           color: $accent-1;
@@ -117,7 +117,7 @@
       button {
         color: $black-halftone;
         border: 1px solid $black-tenthtone;
-        transition: all .25s ease;
+        transition: all 0.25s ease;
 
         &:hover {
           color: $accent-2;
@@ -150,7 +150,9 @@
 }
 
 .predictions.unconfirmedPrediction {
-  .loading { display: block; }
+  .loading {
+    display: block;
+  }
 }
 
 .enablePredictions {
@@ -171,7 +173,6 @@
     padding-top: 5px;
     padding-bottom: 7px;
     margin: 0 auto;
-    border-radius: 12.5px;
     background-color: #0076ff;
     color: white;
     font-weight: normal;
@@ -189,6 +190,8 @@
   font-size: 11px;
   letter-spacing: 0.2px;
   color: #689bd6;
+  margin-left: 2px;
+  margin-right: 2px;
 }
 
 .detailView {
@@ -203,7 +206,7 @@
 
   h3 {
     display: block;
-    color: rgba(104, 155, 214, 1.000);
+    color: rgba(104, 155, 214, 1);
     width: 100%;
     position: absolute;
     top: 0;
@@ -253,7 +256,6 @@
     border: 1px solid $black-tenthtone;
   }
   50% {
-
     border: 1px solid $accent-1;
   }
   100% {
@@ -265,7 +267,6 @@
     border: 1px solid $black-tenthtone;
   }
   50% {
-
     border: 1px solid $accent-2;
   }
   100% {
@@ -275,7 +276,6 @@
 
 /**** Pre-approve *****/
 .preApproval {
-
   h3 {
     background-color: #122e5b;
     border-radius: 15px 15px 0 0;
@@ -300,7 +300,7 @@
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   padding: 0 0 20px 0;
   border-radius: 15px 15px 0 0;
   font-size: 14px;
@@ -309,7 +309,7 @@
   p {
     padding: 0 15px 6px 15px;
     font-size: 14px;
-    opacity: .6;
+    opacity: 0.6;
   }
 
   .preapproveButtonsWrapper {
@@ -333,8 +333,8 @@
     }
 
     button:first-of-type {
-      background-color: rgba(225, 235, 247, 1.000);
-      color: rgba(0, 113, 255, 1.000);
+      background-color: rgba(225, 235, 247, 1);
+      color: rgba(0, 113, 255, 1);
     }
   }
 }
@@ -345,7 +345,7 @@
 
   .contextTitle {
     width: 100%;
-    border-bottom: 1px solid rgba(233, 238, 244, 1.000);
+    border-bottom: 1px solid rgba(233, 238, 244, 1);
     text-align: left;
     position: relative;
     top: -5px;
@@ -354,7 +354,7 @@
     span {
       font-size: 11px;
       font-family: "Open Sans";
-      color: rgba(154, 169, 181, 1.000);
+      color: rgba(154, 169, 181, 1);
       padding: 3px;
       background-color: white;
       position: relative;
@@ -365,40 +365,40 @@
 }
 
 .contextContent button {
-    display: block;
-    text-align: left;
-    width: 100%;
-    border: none;
-    background-color: rgba(240, 245, 251, 0);
-    transition: all .25s ease;
-    padding: 5px 0;
-    border-radius: 0;
-    margin: 0 0 0 0;
-    color: rgba(78, 97, 118, 1.000);
-    font-weight: normal;
-
-    img {
-      margin-left: 15px;
-      position: relative;
-      top: 3px;
-      margin-right: 10px;
-    }
+  display: block;
+  text-align: left;
+  width: 100%;
+  border: none;
+  background-color: rgba(240, 245, 251, 0);
+  transition: all 0.25s ease;
+  padding: 5px 0;
+  border-radius: 0;
+  margin: 0 0 0 0;
+  color: rgba(78, 97, 118, 1);
+  font-weight: normal;
+
+  img {
+    margin-left: 15px;
+    position: relative;
+    top: 3px;
+    margin-right: 10px;
+  }
 
-    span {
-      display: inline-block;
-      position: relative;
-      top: -2px;
-      left: 10px;
-    }
+  span {
+    display: inline-block;
+    position: relative;
+    top: -2px;
+    left: 10px;
+  }
 
-    &:hover {
-      background-color: rgba(240, 245, 251, 1.000);
-    }
+  &:hover {
+    background-color: rgba(240, 245, 251, 1);
+  }
 }
 
 .contextContent .disabledPredictions {
-    width: 80%;
-    text-align: center;
-    margin: 5px auto 0 auto;
-    display: block;
+  width: 80%;
+  text-align: center;
+  margin: 5px auto 0 auto;
+  display: block;
 }
diff --git a/src/components/Proposal/Staking/StakeButtons.tsx b/src/components/Proposal/Staking/StakeButtons.tsx
@@ -277,8 +277,8 @@ class StakeButtons extends React.Component<IProps, IState> {
                   </Tooltip> :
                   passButton
               }
-              {parentPage !== Page.ProposalDetails && proposal.stage === IProposalStage.Queued && !expired ?
-                <div className={css.toBoostMessage}>&gt;{formatTokens(proposal.upstakeNeededToPreBoost, "GEN to boost")}</div>
+              {parentPage !== Page.ProposalDetails && proposal.stage === IProposalStage.Queued && !expired && proposal.upstakeNeededToPreBoost.gten(0) ?
+                <div className={css.toBoostMessage}>&gt; {formatTokens(proposal.upstakeNeededToPreBoost, "GEN to boost")}</div>
                 : ""}
               {
                 (currentAccountAddress && tip(IProposalOutcome.Pass) !== "") ?
@@ -287,8 +287,8 @@ class StakeButtons extends React.Component<IProps, IState> {
                   </Tooltip> :
                   failButton
               }
-              {parentPage !== Page.ProposalDetails && proposal.stage === IProposalStage.PreBoosted && !expired ?
-                <div className={css.toBoostMessage}>{formatTokens(proposal.downStakeNeededToQueue, " GEN to un-boost")}</div>
+              {parentPage !== Page.ProposalDetails && proposal.stage === IProposalStage.PreBoosted && !expired && proposal.downStakeNeededToQueue.gtn(0) ?
+                <div className={css.toBoostMessage}>&gt;= {formatTokens(proposal.downStakeNeededToQueue, " GEN to un-boost")}</div>
                 : ""}
             </div>
             : <span className={css.disabledPredictions}>

diff --git a/src/components/Shared/PreTransactionModal.tsx b/src/components/Shared/PreTransactionModal.tsx
@@ -1,4 +1,4 @@
-import { IDAOState, IMemberState, IProposalState  } from "@daostack/client";
+import { IDAOState, IMemberState, IProposalState, IProposalStage  } from "@daostack/client";
 import { enableWalletProvider } from "arc";
 
 import BN = require("bn.js");
@@ -370,7 +370,13 @@ class PreTransactionModal extends React.Component<IProps, IState> {
                               }
                             </ul>
                           </div>
-                          <div className={css.xToBoost}>&gt; {formatTokens(proposal.upstakeNeededToPreBoost, "GEN") + " needed to boost this proposal"}</div>
+                          { (proposal.stage === IProposalStage.Queued && actionType === ActionTypes.StakePass && proposal.upstakeNeededToPreBoost.gten(0)) ?
+                            <div className={css.xToBoost}>&gt; {formatTokens(proposal.upstakeNeededToPreBoost, "GEN") + " needed to boost this proposal"}</div>
+                            :
+                            (proposal.stage === IProposalStage.PreBoosted && actionType === ActionTypes.StakeFail && proposal.downStakeNeededToQueue.gtn(0)) ?
+                              <div className={css.xToBoost}>&gt;= {formatTokens(proposal.downStakeNeededToQueue, "GEN") + " needed to unboost this proposal"}</div>
+                              : ""
+                          }
                         </div>
                       </div>
                     </div>

diff --git a/src/components/Shared/ProposalCountdown.tsx b/src/components/Shared/ProposalCountdown.tsx
@@ -4,8 +4,6 @@ import * as moment from "moment";
 import * as React from "react";
 import { closingTime } from "lib/proposalHelpers";
 
-import BN = require("bn.js");
-
 import * as css from "./Countdown.scss";
 
 interface IProps {
@@ -129,7 +127,7 @@ export default class ProposalCountdown extends React.Component<IProps, IState> {
         {this.props.detailView ?
           <span className={css.label}>
             { proposal.stage === IProposalStage.Queued ? "Proposal will expire in" :
-              proposal.stage === IProposalStage.PreBoosted && proposal.downStakeNeededToQueue.lte(new BN(0)) ? "Proposal will un-boost in" :
+              proposal.stage === IProposalStage.PreBoosted && proposal.downStakeNeededToQueue.lten(0) ? "Proposal will un-boost in" :
                 proposal.stage === IProposalStage.PreBoosted ? "Proposal will boost in" :
                   (proposal.stage === IProposalStage.Boosted || proposal.stage === IProposalStage.QuietEndingPeriod) && proposal.winningOutcome === IProposalOutcome.Pass ? "Proposal will pass in" :
                     (proposal.stage === IProposalStage.Boosted || proposal.stage === IProposalStage.QuietEndingPeriod) ? "Proposal will fail in" :