warn when GenericScheme value is > 0 (#1733)

* show genericscheme value, in red when > 0 * change wording * blinking warning, and on the card too * handle unknown details * handle DutchX details * update selenium chrome version
daostack · May 20, 2020 · 41f397b · 41f397b
1 parent 3526e0f
commit 41f397b
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
   "dependencies": {
     "3box": "1.17.1",
     "@burner-wallet/burner-connect-provider": "^0.1.1",
-    "@daostack/arc.js": "0.2.68",
+    "@daostack/arc.js": "^0.2.69",
     "@dorgtech/daocreator-ui": "^1.0.9",
     "@fortawesome/fontawesome-svg-core": "^1.2.10",
     "@fortawesome/free-brands-svg-icons": "^5.6.1",

diff --git a/src/components/Proposal/ProposalSummary/ProposalSummary.scss b/src/components/Proposal/ProposalSummary/ProposalSummary.scss
@@ -1,9 +1,8 @@
 .proposalSummary {
   position: relative;
-  border: 1px solid rgba(229, 235, 242, 1.000);
+  border: 1px solid rgba(229, 235, 242, 1);
   border-radius: 2px;
   font-size: 12px;
-  display: inline-block;
   padding: 5px;
   display: block;
   text-align: center;
@@ -14,19 +13,56 @@
   }
 
   a {
-    color: rgba(104, 154, 214, 1.000);
+    color: rgba(104, 154, 214, 1);
+  }
+
+  /* Blink for Webkit and others
+(Chrome, Safari, Firefox, IE, ...)
+*/
+  @keyframes blinker {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @-webkit-keyframes blinker {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  .warning {
+    text-decoration: blink;
+    animation-name: blinker;
+    -webkit-animation-name: blinker;
+    animation-duration: 0.6s;
+    -webkit-animation-duration: 0.6s;
+    animation-iteration-count: infinite;
+    -webkit-animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-direction: alternate;
+    -webkit-animation-direction: alternate;
+    color: red;
+    font-weight: 600;
   }
 }
 
 .proposalSummary.detailView em {
   text-decoration: none;
   font-style: normal;
-  opacity: .6;
+  opacity: 0.6;
   word-break: break-word;
 }
 
 .schemeRegisterIcon {
-  color: rgba(0, 118, 255, 1.000);
+  color: rgba(0, 118, 255, 1);
   font-weight: bold;
 }
 
@@ -36,7 +72,8 @@
   padding: 6px 15px;
 }
 
-.detailView.proposalSummary, .transactionModal.proposalSummary {
+.detailView.proposalSummary,
+.transactionModal.proposalSummary {
   box-shadow: 0 1px 12px 0 rgba(26, 60, 88, 0.09);
   background-color: $white;
   font-size: 16px;
@@ -45,7 +82,6 @@
   width: 100%;
 }
 
-
 .detailView.proposalSummary.withDetails {
   font-size: 13px;
   padding: 0;
@@ -54,7 +90,7 @@
     padding: 20px;
     display: block;
     font-family: "AccordBold";
-    border-bottom: 1px solid rgba(233, 238, 244, 1.000);
+    border-bottom: 1px solid rgba(233, 238, 244, 1);
 
     b {
       display: inline-block;
@@ -76,7 +112,7 @@
     margin: 0;
 
     th {
-      color: rgba(78, 97, 118, 1.000);
+      color: rgba(78, 97, 118, 1);
       font-weight: normal;
       vertical-align: top;
 
@@ -107,7 +143,7 @@
     }
   }
 
-  ul.summaryDetails {
+  .summaryDetails ul {
     padding-left: 40px;
   }
 
@@ -127,18 +163,18 @@
 }
 
 .accountName {
-  color: rgba(80, 97, 118, 1.000);
+  color: rgba(80, 97, 118, 1);
 }
 
 .transferType {
   display: inline-block;
-  color: rgba(80, 97, 118, 1.000);
+  color: rgba(80, 97, 118, 1);
 
   strong {
-    color: rgba(80, 97, 118, 1.000);
+    color: rgba(80, 97, 118, 1);
 
     em {
-      color: rgba(80, 97, 118, 1.000);
+      color: rgba(80, 97, 118, 1);
       font-style: normal;
       font-weight: normal;
     }
@@ -160,7 +196,8 @@
 }
 
 @media only screen and (max-width: 425px) {
-  .detailView.proposalSummary, .transactionModal.proposalSummary {
+  .detailView.proposalSummary,
+  .transactionModal.proposalSummary {
     width: auto;
   }
 }
diff --git a/src/components/Proposal/ProposalSummary/ProposalSummaryDutchX.tsx b/src/components/Proposal/ProposalSummary/ProposalSummaryDutchX.tsx
@@ -19,6 +19,14 @@ export default class ProposalSummaryDutchX extends React.Component<IProps, null>
   public render(): RenderOutput {
     const { proposal, detailView, genericSchemeInfo, transactionModal } = this.props;
     let decodedCallData: any;
+    const sendsETH = proposal.genericScheme.value.gtn(0);
+    const renderValueHtml = () => {
+      return sendsETH ?
+        <div className={sendsETH ? css.warning : ""}>
+          &gt; Send to contract: {formatTokens(proposal.genericScheme.value)} ETH &lt;
+        </div>
+        : "";
+    };
     try {
       decodedCallData = genericSchemeInfo.decodeCallData(proposal.genericScheme.callData);
     } catch (err) {
@@ -44,10 +52,11 @@ export default class ProposalSummaryDutchX extends React.Component<IProps, null>
             <span className={css.summaryTitle}>
               <img src="/assets/images/Icon/edit-sm.svg"/>&nbsp;
               {action.label}
+              {renderValueHtml()}
             </span>
             { detailView ?
               <div className={css.summaryDetails}>
-                { action.fields[0].label}: <a href={linkToEtherScan(decodedCallData.values[0])} target="_blank" rel="noopener noreferrer">{decodedCallData.values[0]}</a>
+                <div>{ action.fields[0].label}: <a href={linkToEtherScan(decodedCallData.values[0])} target="_blank" rel="noopener noreferrer">{decodedCallData.values[0]}</a></div>
               </div>
               : ""
             }
@@ -59,6 +68,7 @@ export default class ProposalSummaryDutchX extends React.Component<IProps, null>
             <span className={css.summaryTitle}>
               <img src="/assets/images/Icon/edit-sm.svg"/>&nbsp;
               {action.label}
+              {renderValueHtml()}
             </span>
             { detailView ?
               <div className={css.summaryDetails}>
@@ -74,6 +84,7 @@ export default class ProposalSummaryDutchX extends React.Component<IProps, null>
             <span className={css.summaryTitle}>
               <img src="/assets/images/Icon/edit-sm.svg"/>&nbsp;
               {action.label}
+              {renderValueHtml()}
             </span>
             { detailView ?
               <div className={css.summaryDetails}>
@@ -89,11 +100,14 @@ export default class ProposalSummaryDutchX extends React.Component<IProps, null>
             <span className={css.summaryTitle}>
               {decodedCallData.values[1] ? "+" : "-"}&nbsp;
               {decodedCallData.values[1] ? "Whitelist" : "Delist"} {decodedCallData.values[0].length} token{decodedCallData.values[0].length !== 1 ? "s" : ""}
+              {renderValueHtml()}
             </span>
             { detailView ?
-              <ul className={css.summaryDetails}>
-                {decodedCallData.values[0].map((token: string) => <li key={token}><a href={linkToEtherScan(token)} target="_blank" rel="noopener noreferrer">{token}</a></li>)}
-              </ul>
+              <div className={css.summaryDetails}>
+                <ul>
+                  {decodedCallData.values[0].map((token: string) => <li key={token}><a href={linkToEtherScan(token)} target="_blank" rel="noopener noreferrer">{token}</a></li>)}
+                </ul>
+              </div>
               : ""
             }
           </div>
@@ -108,7 +122,13 @@ export default class ProposalSummaryDutchX extends React.Component<IProps, null>
             <span className={css.summaryTitle}>
               <img src="/assets/images/Icon/edit-sm.svg"/>&nbsp;
               { field.label }: {formatTokens(new BN(value), field.unit, field.decimals)}
+              {renderValueHtml()}
             </span>
+            {detailView ?
+              <div className={css.summaryDetails}>
+              </div>
+              : ""
+            }
           </div>
         );
       }

diff --git a/src/components/Proposal/ProposalSummary/ProposalSummaryKnownGenericScheme.tsx b/src/components/Proposal/ProposalSummary/ProposalSummaryKnownGenericScheme.tsx
@@ -1,7 +1,7 @@
 import { IDAOState, IProposalState } from "@daostack/arc.js";
 import classNames from "classnames";
 import { GenericSchemeInfo } from "genericSchemeRegistry";
-import { linkToEtherScan } from "lib/util";
+import { linkToEtherScan, formatTokens } from "lib/util";
 import * as React from "react";
 import { IProfileState } from "reducers/profilesReducer";
 import * as css from "./ProposalSummary.scss";
@@ -44,12 +44,19 @@ export default class ProposalSummary extends React.Component<IProps> {
       [css.withDetails]: true,
     });
     let decodedCallData: any;
+    const sendsETH = proposal.genericScheme.value.gtn(0);
+
     try {
       decodedCallData = genericSchemeInfo.decodeCallData(proposal.genericScheme.callData);
     } catch (err) {
       return (
         <div className={proposalSummaryClass}>
-          <span className={css.summaryTitle}>Unknown function call</span>
+          <span className={css.summaryTitle}>Unknown function call
+            {sendsETH ?
+              <div className={css.warning}>&gt; Sending {formatTokens(proposal.genericScheme.value)} ETH &lt;</div>
+              : ""
+            }
+          </span>
           {detailView ?
             <div className={css.summaryDetails}>
               to contract at <a href={linkToEtherScan(proposal.genericScheme.contractToCall)}>{proposal.genericScheme.contractToCall.substr(0, 8)}...</a>
@@ -65,17 +72,24 @@ export default class ProposalSummary extends React.Component<IProps> {
       <span className={css.summaryTitle}>
         <img src="/assets/images/Icon/edit-sm.svg"/>&nbsp;
         { decodedCallData.action.label }
+
+        {sendsETH ?
+          <div className={css.warning}>&gt; Sending {formatTokens(proposal.genericScheme.value)} ETH &lt;</div>
+          : ""
+        }
       </span>
 
       {detailView ?
         <div className={css.summaryDetails}>
-          Executing this proposal will call the function
+          Executing this proposal will call the function:
           <pre>{ decodedCallData.action.abi.name}
         ({ decodedCallData.action.abi.inputs.map(this.inputHtml) })
           </pre>
-          with values <pre>{ decodedCallData.values.map(this.callDataHtml)}</pre>
-          on contract at
+          with values: <pre>{ decodedCallData.values.map(this.callDataHtml)}</pre>
+          on contract at:
           <pre><a href={linkToEtherScan(proposal.genericScheme.contractToCall)}>{proposal.genericScheme.contractToCall}</a></pre>
+          sending to contract:
+          <pre className={sendsETH ? css.warning : ""}>{formatTokens(proposal.genericScheme.value)} ETH</pre>
         </div>
         : ""
       }

diff --git a/src/components/Proposal/ProposalSummary/ProposalSummaryUnknownGenericScheme.tsx b/src/components/Proposal/ProposalSummary/ProposalSummaryUnknownGenericScheme.tsx
@@ -1,6 +1,6 @@
 import { IDAOState, IProposalState } from "@daostack/arc.js";
 import classNames from "classnames";
-import { linkToEtherScan } from "lib/util";
+import { linkToEtherScan, formatTokens } from "lib/util";
 import * as React from "react";
 import { IProfileState } from "reducers/profilesReducer";
 import * as css from "./ProposalSummary.scss";
@@ -25,6 +25,7 @@ export default class ProposalSummary extends React.Component<IProps, IState> {
 
   public render(): RenderOutput {
     const { proposal, detailView, transactionModal } = this.props;
+    const sendsETH = proposal.genericScheme.value.gtn(0);
     const proposalSummaryClass = classNames({
       [css.detailView]: detailView,
       [css.transactionModal]: transactionModal,
@@ -33,10 +34,19 @@ export default class ProposalSummary extends React.Component<IProps, IState> {
     });
     return (
       <div className={proposalSummaryClass}>
-        <span className={css.summaryTitle}>Unknown function call</span>
+        <span className={css.summaryTitle}>
+        Unknown function call
+          {sendsETH ?
+            <div className={css.warning}>&gt; Sending {formatTokens(proposal.genericScheme.value)} ETH &lt;</div>
+            : ""
+          }
+        </span>
         {detailView ?
           <div className={css.summaryDetails}>
-            to contract at <a href={linkToEtherScan(proposal.genericScheme.contractToCall)}>{proposal.genericScheme.contractToCall.substr(0, 8)}...</a>
+            on contract at:
+            <pre><a href={linkToEtherScan(proposal.genericScheme.contractToCall)}>{proposal.genericScheme.contractToCall}</a></pre>
+            sending to contract:
+            <pre className={sendsETH ? css.warning : ""}>{formatTokens(proposal.genericScheme.value)} ETH</pre>
           </div>
           : ""
         }

diff --git a/test/integration/wdio.conf.js b/test/integration/wdio.conf.js
@@ -124,7 +124,7 @@ exports.config = {
       chrome: {
         // check for more recent versions of chrome driver here:
         // https://chromedriver.storage.googleapis.com/index.html
-        version: "80.0.3987.16",
+        version: "83.0.4103.39",
         arch: process.arch,
         baseURL: "https://chromedriver.storage.googleapis.com",
       },
@@ -139,7 +139,7 @@ exports.config = {
       chrome: {
         // check for more recent versions of chrome driver here:
         // https://chromedriver.storage.googleapis.com/index.html
-        version: "80.0.3987.16",
+        version: "83.0.4103.39",
         arch: process.arch,
         baseURL: "https://chromedriver.storage.googleapis.com",
       },