Show result

embark-ui/src/components/ContractFunctions.js

@@ -5,15 +5,31 @@ import {
   Grid,
   Form,
   Button,
+  List,
   Card
 } from "tabler-react";
 
 class ContractFunction extends Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = { inputs: {} };
   }
 
+  buttonTitle() {
+    const { method } =this.props;
+    if (method.name === 'constructor') {
+      return 'Deploy';
+    }
+
+    return (method.mutability === 'view' || method.mutability === 'pure') ? 'Call' : 'Send';
+  }
+
+  inputsAsArray(){
+    return this.props.method.inputs
+      .map(input => this.state.inputs[input.name])
+      .filter(value => value);
+  }
+
   handleChange(e, name) {
     let newInputs = this.state.inputs;
     newInputs[name] = e.target.value;
@@ -22,8 +38,11 @@ class ContractFunction extends Component {
 
   handleCall(e) {
     e.preventDefault();
-    const inputs = this.props.method.inputs.map(input => this.state.inputs[input.name]);
-    this.props.postContractFunction(this.props.contractProfile.name, this.props.method.name, inputs);
+    this.props.postContractFunction(this.props.contractProfile.name, this.props.method.name, this.inputsAsArray());
+  }
+
+  callDisabled() {
+    return this.inputsAsArray().length !== this.props.method.inputs.length;
   }
 
   render() {
@@ -34,17 +53,25 @@ class ContractFunction extends Component {
             <Card.Header>
               <Card.Title>{this.props.method.name}</Card.Title>
             </Card.Header>
-            {this.props.method.inputs.length > 0 &&
             <Card.Body>
               {this.props.method.inputs.map(input => (
                 <Form.Group key={input.name} label={input.name}>
                   <Form.Input placeholder={input.type} onChange={(e) => this.handleChange(e, input.name)}/>
                 </Form.Group>
               ))}
+              <Button color="primary" disabled={this.callDisabled()} onClick={(e) => this.handleCall(e)}>
+                {this.buttonTitle()}
+              </Button>
             </Card.Body>
-            }
             <Card.Footer>
-              <Button color="primary" onClick={(e) => this.handleCall(e)}>Call</Button>
+              <List>
+                {this.props.contractFunctions.map(contractFunction => (
+                  <List.Item key={contractFunction.result}>
+                    {contractFunction.inputs.length > 0 && <p>Inputs: {contractFunction.inputs.join(', ')}</p>}
+                    <strong>Result: {contractFunction.result}</strong>
+                  </List.Item>
+                ))}
+              </List>
             </Card.Footer>
           </Card>
         </Grid.Col>
@@ -53,7 +80,6 @@ class ContractFunction extends Component {
   }
 }
 
-
 ContractFunction.propTypes = {
   contractProfile: PropTypes.object,
   method: PropTypes.object,
@@ -61,22 +87,40 @@ ContractFunction.propTypes = {
   postContractFunction: PropTypes.func
 };
 
+const filterContractFunctions = (contractFunctions, contractName, method) => {
+  return contractFunctions.filter((contractFunction) => (
+    contractFunction.contractName === contractName && contractFunction.method === method
+  ));
+};
+
 const ContractFunctions = (props) => {
   const {contractProfile} = props;
+
   return (
     <Page.Content title={contractProfile.name + ' Functions'}>
       {contractProfile.methods
-        .filter(method => method.name !== 'constructor')
-        .map(method => <ContractFunction key={method.name} method={method} {...props} />)}
+        .filter((method) => {
+          return props.onlyConstructor ? method.name === 'constructor' : method.name !== 'constructor';
+        })
+        .map(method => <ContractFunction key={method.name}
+                                         method={method}
+                                         contractFunctions={filterContractFunctions(props.contractFunctions, contractProfile.name, method.name)}
+                                         contractProfile={contractProfile}
+                                         postContractFunction={props.postContractFunction} />)}
     </Page.Content>
-  )
+  );
 };
 
 ContractFunctions.propTypes = {
+  onlyConstructor: PropTypes.bool,
   contractProfile: PropTypes.object,
   contractFunctions: PropTypes.arrayOf(PropTypes.object),
   postContractFunction: PropTypes.func
 };
 
+ContractFunctions.defaultProps = {
+  onlyConstructor: false
+};
+
 export default ContractFunctions;
 

embark-ui/src/containers/ContractFunctionsContainer.js

@@ -20,7 +20,8 @@ class ContractFunctionsContainer extends Component {
                    render={({contractProfile, contractFunctions, postContractFunction}) => (
         <ContractFunctions contractProfile={contractProfile}
                            contractFunctions={contractFunctions}
-                           postContractFunction={postContractFunction} />
+                           constructor={true}
+                           postContractFunction={postContractFunction}/>
       )} />
     );
   }

lib/modules/contracts_manager/index.js

@@ -103,21 +103,25 @@ class ContractsManager {
           account: (callback) => {
             self.events.request("blockchain:defaultAccount:get", (account) => callback(null, account));
           }
-        }, function (err, result) {
-          if (err) {
-            return res.send({error: err.message});
+        }, function (error, result) {
+          if (error) {
+            return res.send({error: error.message});
           }
           const {account, contract} = result;
           const contractObj = new web3.eth.Contract(contract.abiDefinition, contract.deployedAddress);
           const abi = contract.abiDefinition.find(definition => definition.name === req.body.method);
           const funcCall = (abi.constant === true || abi.stateMutability === 'view' || abi.stateMutability === 'pure') ? 'call' : 'send';
-          contractObj.methods[req.body.method].apply(this, req.body.inputs)[funcCall]({from: account}, (err, result) => {
-            if (err) {
-              return res.send({error: err.message});
-            }
+          try {
+            contractObj.methods[req.body.method].apply(this, req.body.inputs)[funcCall]({from: account}, (error, result) => {
+              if (error) {
+                return res.send({result: error.message});
+              }
 
-            res.send({result: result});
-          });
+              return res.send({result});
+            });
+          } catch (e) {
+            return res.send({result: e.message});
+          }
         });
       }
     );

templates/boilerplate/chains.json

@@ -1,22 +1 @@
-{
-  "0xf957b38706f783689e96d5b17c2c24a2a1b2093b8e7c5f43e748878a73456984": {
-    "contracts": {
-      "0xa72e15b4fc637528e678fdcab66f178b753f609a6d2a66564f1676fde4d51ed3": {
-        "name": "SimpleStorage",
-        "address": "0x595dE951E7458Cf6e49606C91294A764098248AD"
-      },
-      "0x05a320b7f23891fc8c8c40312e0ae5a104d4734b3c0692eb24f9e99fca0ada3f": {
-        "name": "ENSRegistry",
-        "address": "0x07dF106F12b516a36e29e23b2acF1e47b26Cb81B"
-      },
-      "0xa971bc944c276c3a2f98bdad24d102d00615680517267a9e48cf7091ce512c88": {
-        "name": "Resolver",
-        "address": "0x8e43bD6a0357385D5a35980baCa7A2644459038b"
-      },
-      "0x618f78549c37a154c4931bb2f10e4b92fbf8004fc1dfa6c11b3276257d3c84f0": {
-        "name": "FIFSRegistrar",
-        "address": "0xf2086ADff73E5B6412c1ca089250b77f9B28984B"
-      }
-    }
-  }
-}
+{}