Show functions

embark-ui/src/components/ContractFunctions.js

@@ -0,0 +1,48 @@
+import PropTypes from "prop-types";
+import React from 'react';
+import {
+  Page,
+  Grid,
+  Form,
+  Button,
+  Card
+} from "tabler-react";
+
+const ContractFunction = ({method}) => (
+  <Grid.Row>
+    <Grid.Col>
+      <Card>
+        <Card.Header>
+          <Card.Title>{method.name}</Card.Title>
+        </Card.Header>
+        {method.inputs.length > 0 &&
+          <Card.Body>
+            {method.inputs.map(input => (
+              <Form.Group label={input.name}>
+                <Form.Input placeholder={input.type}/>
+              </Form.Group>
+            ))}
+          </Card.Body>
+        }
+        <Card.Footer>
+          <Button color="primary">Call</Button>
+        </Card.Footer>
+      </Card>
+    </Grid.Col>
+  </Grid.Row>
+);
+
+const ContractFunctions = ({contractProfile}) => (
+  <Page.Content title={contractProfile.name + ' Functions'}>
+    {contractProfile.methods
+      .filter(method => method.name !== 'constructor')
+      .map(method => <ContractFunction method={method} />)}
+  </Page.Content>
+);
+
+ContractFunctions.propTypes = {
+  contractProfile: PropTypes.object
+};
+
+export default ContractFunctions;
+

embark-ui/src/components/ContractLayout.js

@@ -9,6 +9,7 @@ import {
 
 import ContractContainer from '../containers/ContractContainer';
 import ContractLoggerContainer from '../containers/ContractLoggerContainer';
+import ContractFunctionsContainer from '../containers/ContractFunctionsContainer';
 import ContractProfileContainer from '../containers/ContractProfileContainer';
 import ContractSourceContainer from '../containers/ContractSourceContainer';
 
@@ -72,6 +73,7 @@ const ContractLayout = ({match}) => (
     <Grid.Col md={9}>
       <Switch>
         <Route exact path="/embark/contracts/:contractName/overview" component={ContractContainer} />
+        <Route exact path="/embark/contracts/:contractName/functions" component={ContractFunctionsContainer} />
         <Route exact path="/embark/contracts/:contractName/source" component={ContractSourceContainer} />
         <Route exact path="/embark/contracts/:contractName/profiler" component={ContractProfileContainer} />
         <Route exact path="/embark/contracts/:contractName/logger" component={ContractLoggerContainer} />

embark-ui/src/containers/ContractContainer.js

@@ -3,7 +3,6 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import {withRouter} from 'react-router-dom';
 
-import {contract as contractAction} from '../actions';
 import Contract from '../components/Contract';
 import DataWrapper from "../components/DataWrapper";
 import {getContract} from "../reducers/selectors";
@@ -27,14 +26,10 @@ function mapStateToProps(state, props) {
 }
 
 ContractContainer.propTypes = {
-  match: PropTypes.object,
   contract: PropTypes.object,
   error: PropTypes.string
 };
 
 export default withRouter(connect(
-  mapStateToProps,
-  {
-    fetchContract: contractAction.request
-  }
+  mapStateToProps
 )(ContractContainer));

embark-ui/src/containers/ContractFunctionsContainer.js

@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {withRouter} from 'react-router-dom';
+
+import {contractProfile as contractProfileAction} from '../actions';
+import ContractFunctions from '../components/ContractFunctions';
+import DataWrapper from "../components/DataWrapper";
+import {getContractProfile} from "../reducers/selectors";
+
+class ContractFunctionsContainer extends Component {
+  componentDidMount() {
+    this.props.fetchContractProfile(this.props.match.params.contractName);
+  }
+
+  render() {
+    return (
+      <DataWrapper shouldRender={this.props.contractProfile !== undefined } {...this.props} render={({contractProfile}) => (
+        <ContractFunctions contractProfile={contractProfile} />
+      )} />
+    );
+  }
+}
+
+function mapStateToProps(state, props) {
+  return {
+    contractProfile: getContractProfile(state, props.match.params.contractName),
+    error: state.errorMessage,
+    loading: state.loading
+  };
+}
+
+ContractFunctionsContainer.propTypes = {
+  match: PropTypes.object,
+  contractProfile: PropTypes.object,
+  fetchContractProfile: PropTypes.func,
+  error: PropTypes.string
+};
+
+export default withRouter(connect(
+  mapStateToProps,
+  {
+    fetchContractProfile: contractProfileAction.request
+  }
+)(ContractFunctionsContainer));