Minimise transactions progress (#4942)

* Watch the requests and display them throughout the app

* Linting

* Showing Requests

* Fully working Transaction Requests Display

* Add FormattedMessage to Requests

* Clean-up the Transfer dialog

* Update Validations

* Cleanup Create Wallet

* Clean Deploy Contract Dialog

* Cleanup Contract Execution

* Fix Requests

* Cleanup Wallet Settings

* Don't show stepper in Portal if less than 2 steps

* WIP local storage requests

* Caching requests and saving contract deployments

* Add Historic prop to Requests MethodDecoding

* Fix tests

* Add Contract address to MethodDecoding

* PR Grumbles - Part I

* PR Grumbles - Part II

* Use API Subscription methods

* Linting

* Move SavedRequests and add tests

* Added tests for Requests Actions

* Fixing tests

* PR Grumbles + Playground fix

* Revert Playground changes

* PR Grumbles

* Better showEth in MethodDecoding

js/src/ui/MethodDecoding/methodDecoding.js

@@ -33,14 +33,20 @@ const TOKEN_METHODS = {
 class MethodDecoding extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
-  }
+  };
 
   static propTypes = {
     address: PropTypes.string.isRequired,
+    compact: PropTypes.bool,
     token: PropTypes.object,
     transaction: PropTypes.object,
     historic: PropTypes.bool
-  }
+  };
+
+  static defaultProps = {
+    compact: false,
+    historic: false
+  };
 
   state = {
     contractAddress: null,
@@ -54,7 +60,7 @@ class MethodDecoding extends Component {
     isLoading: true,
     expandInput: false,
     inputType: 'auto'
-  }
+  };
 
   methodDecodingStore = MethodDecodingStore.get(this.context.api);
 
@@ -106,10 +112,10 @@ class MethodDecoding extends Component {
   }
 
   renderGas () {
-    const { historic, transaction } = this.props;
+    const { compact, historic, transaction } = this.props;
     const { gas, gasPrice, value } = transaction;
 
-    if (!gas || !gasPrice) {
+    if (!gas || !gasPrice || compact) {
       return null;
     }
 
@@ -248,7 +254,12 @@ class MethodDecoding extends Component {
   }
 
   renderInputValue () {
-    const { transaction } = this.props;
+    const { compact, transaction } = this.props;
+
+    if (compact) {
+      return null;
+    }
+
     const { expandInput, inputType } = this.state;
     const input = transaction.input || transaction.data;
 
@@ -347,7 +358,7 @@ class MethodDecoding extends Component {
   }
 
   renderDeploy () {
-    const { historic, transaction } = this.props;
+    const { compact, historic, transaction } = this.props;
     const { methodInputs } = this.state;
     const { value } = transaction;
 
@@ -384,21 +395,21 @@ class MethodDecoding extends Component {
           />
         </div>
         { this.renderAddressName(transaction.creates, false) }
-        <div>
-          {
-            methodInputs && methodInputs.length
-              ? (
-                <FormattedMessage
-                  id='ui.methodDecoding.deploy.params'
-                  defaultMessage='with the following parameters:'
-                />
-              )
-              : ''
-          }
-        </div>
-        <div className={ styles.inputs }>
-          { this.renderInputs() }
-        </div>
+        {
+          !compact && methodInputs && methodInputs.length
+          ? (
+            <div>
+              <FormattedMessage
+                id='ui.methodDecoding.deploy.params'
+                defaultMessage='with the following parameters:'
+              />
+              <div className={ styles.inputs }>
+                { this.renderInputs() }
+              </div>
+            </div>
+          )
+          : null
+        }
       </div>
     );
   }
@@ -474,15 +485,18 @@ class MethodDecoding extends Component {
   }
 
   renderSignatureMethod () {
-    const { historic, transaction } = this.props;
+    const { compact, historic, transaction } = this.props;
     const { methodName, methodInputs } = this.state;
 
+    const showInputs = !compact && methodInputs && methodInputs.length > 0;
+    const showEth = !!(transaction.value && transaction.value.gt(0));
+
     const method = (
       <span className={ styles.name }>
         { methodName }
       </span>
     );
-    const ethValue = (
+    const ethValue = showEth && (
       <span className={ styles.highlight }>
         { this.renderEtherValue(transaction.value) }
       </span>
@@ -493,19 +507,27 @@ class MethodDecoding extends Component {
         <div className={ styles.description }>
           <FormattedMessage
             id='ui.methodDecoding.signature.info'
-            defaultMessage='{historic, select, true {Executed} false {Will execute}} the {method} function on the contract {address} trsansferring {ethValue}{inputLength, plural, zero {,} other {passing the following {inputLength, plural, one {parameter} other {parameters}}}}'
+            defaultMessage='{historic, select, true {Executed} false {Will execute}} the {method} function on the contract {address} {showEth, select, true {transferring {ethValue}} false {}} {showInputs, select, false {} true {passing the following {inputLength, plural, one {parameter} other {parameters}}}}'
             values={ {
               historic,
               method,
               ethValue,
+              showEth,
+              showInputs,
               address: this.renderAddressName(transaction.to),
               inputLength: methodInputs.length
             } }
           />
         </div>
-        <div className={ styles.inputs }>
-          { this.renderInputs() }
-        </div>
+        {
+          showInputs
+          ? (
+            <div className={ styles.inputs }>
+              { this.renderInputs() }
+            </div>
+          )
+          : null
+        }
       </div>
     );
   }