Allows copying commands to clipboard

lib/modules/webserver/backend/contracts/components/account-list.js

@@ -6,6 +6,9 @@ class AccountList extends React.Component {
             errorMessage: "",
             accounts: []
         };
+
+        this.handleClick = this.handleClick.bind(this);
+        this.handleCopyClick = this.handleCopyClick.bind(this);
     }
 
 
@@ -23,7 +26,16 @@ class AccountList extends React.Component {
 
     }
 
+    handleCopyClick(e){
+        e.preventDefault(); 
 
+        var dummy = document.createElement("input");
+        document.body.appendChild(dummy);
+        dummy.setAttribute('value', "await web3.eth.getAccounts();");
+        dummy.select();
+        document.execCommand("copy");
+        document.body.removeChild(dummy);
+    }
     
     render(){
         return <ContractContext.Consumer> 
@@ -32,6 +44,9 @@ class AccountList extends React.Component {
             <div className="card function">
                 <div className="card-header">
                     <h3 className="card-title">Get Accounts</h3>
+                    <div className="card-options">
+                        <a href="#" onClick={this.handleCopyClick} title="Copy to clipboard"><i className="fe fe-copy"></i></a>
+                    </div>
                 </div>
                 <CardAlert show={this.state.error} message={this.state.errorMessage} />
                 <div className="card-body row">

lib/modules/webserver/backend/contracts/components/function-form.js

@@ -8,7 +8,14 @@ class FunctionForm extends React.Component {
             receipt: null
         };
 
+        this.child = React.createRef();
+
         this.showResults = this.showResults.bind(this);
+        this.handleCopyClick = this.handleCopyClick.bind(this);
+    }
+
+    handleCopyClick(e){
+        this.child.current.copyCommand(e);
     }
 
     _getFunctionParamFields(elem){
@@ -30,21 +37,18 @@ class FunctionForm extends React.Component {
         const receipt = this.state.receipt;
 
         return <div className="card function">
-            { 
+           
-                this.props.abi.type == "function" || this.props.abi.type == "fallback"
+            <div className="card-header">
-                ?
+                <h3 className="card-title">{this.props.abi.type == 'function'  ? this.props.abi.name : (this.props.abi.type == 'fallback' ? '(fallback)' : this.props.abi.name)}</h3>
-                <div className="card-header">
+                <div className="card-options">
-                    <h3 className="card-title">{this.props.abi.type == 'function'  ? this.props.abi.name : (this.props.abi.type == 'fallback' ? '(fallback)' : this.props.abi.name)}</h3>
+                    <a href="#" onClick={this.handleCopyClick} title="Copy to clipboard"><i className="fe fe-copy"></i></a>
                 </div>
-                : 
+            </div>
-                ""
+              
-            }
-            
-            
             <CardAlert show={this.state.error} message={this.state.message} />
 
             <div className="card-body row">
-                <Function definition={this.props.definition} contract={this.props.contract} contractName={this.props.contractName} duplicated={isDuplicated} abi={this.props.abi} resultHandler={this.showResults} />
+                <Function ref={this.child} definition={this.props.definition} contract={this.props.contract} contractName={this.props.contractName} duplicated={isDuplicated} abi={this.props.abi} resultHandler={this.showResults} />
            </div>
            {
                receipt != null || !this.state.error && this.state.message != null 

lib/modules/webserver/backend/contracts/components/function.js

@@ -20,6 +20,30 @@ class Function extends React.Component {
         this.handleClick = this.handleClick.bind(this);
     }
 
+
+    copyCommand(e){
+        e.preventDefault(); 
+
+        let fields = this.state.fields;
+
+        let functionLabel = this._getFunctionLabel();
+        let functionParams = this._getFunctionParamString();
+        let methodParams = this._getMethodString();
+        if(this.props.abi.type == "constructor")
+            functionParams = `{arguments: [${functionParams}]}`;
+
+        const command = `await ${functionLabel}(${functionParams})${this.props.abi.type != 'fallback' ? '.' + this._getMethodType() : ''}${methodParams}`;
+
+        var dummy = document.createElement("input");
+        document.body.appendChild(dummy);
+        dummy.setAttribute('value', command);
+        dummy.select();
+        document.execCommand("copy");
+        document.body.removeChild(dummy);
+    }
+
+
+
     async handleClick(e, instanceUpdateCallback){
         e.preventDefault(); 
 
@@ -70,7 +94,6 @@ class Function extends React.Component {
                                 [this._getMethodType()](executionParams)
                 
                 if(this._getMethodType() == 'call'){
-                    console.log("A");
                     this.props.resultHandler(false, _receipt, null);
                 } else {
                     this.props.resultHandler(false, null, _receipt);
@@ -173,21 +196,21 @@ class Function extends React.Component {
     _getFunctionParamString(){
         if(this.props.abi.type == 'fallback') return '';
         return this.props.abi.inputs
-                .map((input, i) => (input.type.indexOf('int') == -1 ? '"' : '') + this.state.fields[input.name] + (input.type.indexOf('int') == -1 ? '"' : ''))
+                .map((input, i) => (input.type.indexOf('int') == -1 ? '"' : '') + (this.state.fields[input.name] || (input.type.indexOf('int') == -1 ? '' : '0')) + (input.type.indexOf('int') == -1 ? '"' : ''))
                 .join(', ');
     }
 
     _getMethodString(elem){
         let methodParams = "({";
 
-        methodParams += `from: ` + this.state.selectedAccount;
+        methodParams += `from: ` + (this.state.selectedAccount || '"0x00"');
         if(this._getMethodType() == 'send'){
-            methodParams += ', gasLimit: ' +  this.state.methodFields.gasLimit
+            methodParams += ', gasLimit: ' +  (this.state.methodFields.gasLimit || 0)
             if(this.props.abi.payable){
-                methodParams += ', value: ' + this.state.methodFields.value
+                methodParams += ', value: ' + (this.state.methodFields.value || 0)
             }
             if(this.props.abi.type == 'fallback'){
-                methodParams += ', data: "' +  this.state.methodFields.data + '", to: "' + this.state.methodFields.to + '"'
+                methodParams += ', data: "' +  (this.state.methodFields.data || '"0x00"' ) + '", to: "' + (this.state.methodFields.to || '"0x00"') + '"'
             }
         }
         return methodParams + "})";