break out array, and truncate long param values (#1799)

* break out array, and truncate long param values * improved readability * more improved readability * more on readability * remove spaces
daostack · Jun 4, 2020 · 4b9ee29 · 4b9ee29
1 parent 1f1da9d
commit 4b9ee29
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "alchemy-client",
-  "version": "0.10.9",
+  "version": "0.10.9-1",
   "description": "An app for collaborative networks (DAOs), based on the DAO stack.",
   "author": "DAOstack",
   "license": "GPL-3.0",

diff --git a/src/components/Proposal/ProposalSummary/ProposalSummary.scss b/src/components/Proposal/ProposalSummary/ProposalSummary.scss
@@ -115,12 +115,17 @@
       color: rgba(78, 97, 118, 1);
       font-weight: normal;
       vertical-align: top;
+    }
 
-      img {
-        margin-left: 5px;
-        position: relative;
-        top: 1px;
-      }
+    th img,
+    img.copyToClipboard {
+      margin-left: 5px;
+      position: relative;
+      top: 1px;
+    }
+
+    pre .arrayItem {
+      margin-left: 8px;
     }
 
     td {

diff --git a/src/components/Proposal/ProposalSummary/ProposalSummaryKnownGenericScheme.tsx b/src/components/Proposal/ProposalSummary/ProposalSummaryKnownGenericScheme.tsx
@@ -1,15 +1,25 @@
 import { IDAOState, IProposalState } from "@daostack/arc.js";
 import classNames from "classnames";
 import { GenericSchemeInfo } from "genericSchemeRegistry";
-import { linkToEtherScan, formatTokens } from "lib/util";
+import { linkToEtherScan, formatTokens, truncateWithEllipses, copyToClipboard } from "lib/util";
 import * as React from "react";
 import { IProfileState } from "reducers/profilesReducer";
 import * as css from "./ProposalSummary.scss";
 import ProposalSummaryDutchX from "./ProposalSummaryDutchX";
 import ProposalSummaryStandardBounties from "./ProposalSummaryStandardBounties";
 import ProposalSummaryCO2ken from "./ProposalSummaryCO2ken";
+import { NotificationStatus, showNotification } from "reducers/notifications";
+import { connect } from "react-redux";
 
-interface IProps {
+interface IDispatchProps {
+  showNotification: typeof showNotification;
+}
+
+const mapDispatchToProps = {
+  showNotification,
+};
+
+interface IExternalProps {
   beneficiaryProfile?: IProfileState;
   detailView?: boolean;
   dao: IDAOState;
@@ -18,15 +28,39 @@ interface IProps {
   genericSchemeInfo: GenericSchemeInfo;
 }
 
-export default class ProposalSummary extends React.Component<IProps> {
+type IProps = IExternalProps & IDispatchProps;
+
+class ProposalSummary extends React.Component<IProps> {
+
+  private copyToClipboard = (str: string) => (e: any): void => {
+    const { showNotification } = this.props;
+    copyToClipboard(str);
+    showNotification(NotificationStatus.Success, "Copied to clipboard!");
+    e.preventDefault();
+  }
 
   constructor(props: IProps) {
     super(props);
   }
 
   private inputHtml = (x: any) => <span key={x.name}>{x.name} {x.type}, </span>;
-  private callDataHtml = (value: any) => <div key={value}>{value}</div>;
+  private callDataHtml = (value: any, isArrayItem = false) => {
+    if (value?.length > 66) {
 
+      value = truncateWithEllipses(value, 66);
+
+      return <div
+        className={isArrayItem ? css.arrayItem : ""}
+        key={value}
+      >{value}<img className={css.copyToClipboard}
+          onClick={this.copyToClipboard(value)}
+          src="/assets/images/Icon/Copy-blue.svg" />{isArrayItem ? "," : ""}
+      </div>;
+
+    } else {
+      return <div className={isArrayItem ? css.arrayItem : ""} key={value}>{value}{isArrayItem ? "," : ""}</div>;
+    }
+  }
 
   public render(): RenderOutput {
     const { proposal, detailView, transactionModal, genericSchemeInfo } = this.props;
@@ -85,7 +119,20 @@ export default class ProposalSummary extends React.Component<IProps> {
           <pre>{ decodedCallData.action.abi.name}
         ({ decodedCallData.action.abi.inputs.map(this.inputHtml) })
           </pre>
-          with values: <pre>{ decodedCallData.values.map(this.callDataHtml)}</pre>
+          with values: <pre>{
+            decodedCallData.values.map((value: string | Array<string>) =>
+            {
+              if (value instanceof Array) {
+                return <>
+                  <span>[</span>
+                  { value.map((value: string) => this.callDataHtml(value, true)) }
+                  <span>]</span>
+                </>;
+              } else {
+                return this.callDataHtml(value);
+              }
+            })}
+          </pre>
           on contract at:
           <pre><a href={linkToEtherScan(proposal.genericScheme.contractToCall)}>{proposal.genericScheme.contractToCall}</a></pre>
           sending to contract:
@@ -96,3 +143,5 @@ export default class ProposalSummary extends React.Component<IProps> {
     </div>;
   }
 }
+
+export default connect(null, mapDispatchToProps)(ProposalSummary);