display contract profile

embark-ui/src/actions/index.js

@@ -126,16 +126,17 @@ export function initBlockHeader(){
   };
 }
 
-export function fetchContractProfile() {
+export function fetchContractProfile(contractName) {
   return {
-    type: FETCH_CONTRACT_PROFILE
+    type: FETCH_CONTRACT_PROFILE,
+    contractName
   };
 }
 
-export function receiveContractProfile(profile) {
+export function receiveContractProfile(contractProfile) {
   return {
     type: RECEIVE_CONTRACT_PROFILE,
-    profile
+    contractProfile
   };
 }
 

embark-ui/src/api/index.js

@@ -76,5 +76,7 @@ export function fetchContracts() {
 }
 
 export function fetchContractProfile(contractName) {
+  console.dir("api: fetchContractProfile");
+  console.dir(contractName);
   return axios.get('http://localhost:8000/embark-api/profiler/' + contractName);
 }

embark-ui/src/components/ContractLayout.js

@@ -8,7 +8,7 @@ import {
 
 import ContractContainer from '../containers/ContractContainer';
 
-const ContractLayout = () => (
+const ContractLayout = (props) => (
   <Grid.Row>
     <Grid.Col md={3}>
       <Page.Title className="my-5">Contract</Page.Title>
@@ -40,7 +40,7 @@ const ContractLayout = () => (
           </List.GroupItem>
           <List.GroupItem
             className="d-flex align-items-center"
-            to={withRouter(ContractContainer)}
+            to={`/embark/contracts/${props.match.params.contractName}/profiler`}
             icon="server"
             RootComponent={withRouter(NavLink)}
           >

embark-ui/src/components/ContractProfile.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+const ContractProfile = ({contract}) => (
+  <React.Fragment>
+    <h1>Profile for {contract.name}</h1>
+    <table>
+      <thead>
+        <tr>
+          <th>Function</th>
+          <th>Payable</th>
+          <th>Mutability</th>
+          <th>Inputs</th>
+          <th>Ouputs</th>
+          <th>Gas Estimates</th>
+        </tr>
+      </thead>
+      <tbody>
+        {contract.methods.map((method) => {
+          return (
+            <tr>
+              <td>{method.name}</td>
+              <td>{(method.payable == true).toString()}</td>
+              <td>{method.mutability}</td>
+              <td>({method.inputs.map((x) => x.type).join(',')})</td>
+              <td>({method.outputs.map((x) => x.type).join(',')})</td>
+              <td>{method.gasEstimates}</td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  </React.Fragment>
+);
+
+export default ContractProfile;
+

embark-ui/src/containers/ContractContainer.js

@@ -7,12 +7,6 @@ import { withRouter } from 'react-router'
 
 class ContractContainer extends Component {
   componentWillMount() {
-    console.dir("----");
-    console.dir(this.props);
-    //console.dir(this.state);
-    //console.dir(this.props.match.params.contractName);
-    //console.dir(this.props.match.params.contractName);
-    //console.dir(this.props.fetchContract.toString());
     this.props.fetchContract(this.props.match.params.contractName);
   }
 
@@ -46,8 +40,6 @@ class ContractContainer extends Component {
 };
 
 function mapStateToProps(state) {
-  console.dir("---->>>>>");
-  console.dir(arguments);
   return { contract: state.contract }
 }
 

embark-ui/src/containers/ContractProfileContainer.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { fetchContractProfile } from '../actions';
+import ContractProfile from '../components/ContractProfile';
+import { withRouter } from 'react-router'
+
+class ContractProfileContainer extends Component {
+  componentWillMount() {
+    this.props.fetchContractProfile(this.props.match.params.contractName);
+  }
+
+  render() {
+    console.dir("||======>");
+    console.dir(this.props);
+    console.dir("||======>");
+    //const { contract } = this.props;
+    const contract = this.props.contractProfile;
+    if (!contract.data) {
+      return (
+        <h1>
+          <i>Loading contract...</i>
+        </h1>
+      )
+    }
+
+    if (contract.error) {
+      return (
+        <h1>
+          <i>Error API...</i>
+        </h1>
+      )
+    }
+
+    console.dir(contract);
+
+    return (
+      <ContractProfile contract={contract.data} />
+    );
+  }
+};
+
+function mapStateToProps(state) {
+  console.dir("-----------");
+  console.dir("-----------");
+  console.dir(state);
+  console.dir("-----------");
+  console.dir("-----------");
+  return { contractProfile: state.contractProfile }
+}
+
+export default compose(
+  connect(
+    mapStateToProps,
+    { fetchContractProfile }
+  ),
+  withRouter
+)(ContractProfileContainer)
+

embark-ui/src/reducers/contractProfileReducer.js

@@ -0,0 +1,14 @@
+import {RECEIVE_CONTRACT_PROFILE, RECEIVE_CONTRACT_PROFILE_ERROR} from "../actions";
+
+export default function contractProfile(state = {}, action) {
+  console.dir("** reducer contract profile");
+  console.dir(arguments);
+  switch (action.type) {
+    case RECEIVE_CONTRACT_PROFILE:
+      return Object.assign({}, state, {data: action.contractProfile.data});
+    case RECEIVE_CONTRACT_PROFILE_ERROR:
+      return Object.assign({}, state, {error: true});
+    default:
+      return state;
+  }
+}

embark-ui/src/reducers/index.js

@@ -6,12 +6,14 @@ import transactionsReducer from './transactionsReducer';
 import commandsReducer from './commandsReducer';
 import contractsReducer from './contractsReducer';
 import contractReducer from './contractReducer';
+import contractProfileReducer from './contractProfileReducer';
 
 const rootReducer = combineReducers({
   accounts: accountsReducer,
   processes: processesReducer,
   contracts: contractsReducer,
   contract: contractReducer,
+  contractProfile: contractProfileReducer,
   blocks: blocksReducer,
   transactions: transactionsReducer,
   commands: commandsReducer,

embark-ui/src/routes.js

@@ -5,6 +5,7 @@ import HomeContainer from './containers/HomeContainer';
 import AccountsContainer from './containers/AccountsContainer';
 import ContractsContainer from './containers/ContractsContainer';
 import ContractContainer from './containers/ContractContainer';
+import ContractProfileContainer from './containers/ContractProfileContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
 import ProcessesLayout from './components/ProcessesLayout';
@@ -18,6 +19,7 @@ const routes = (
       <Route path="/embark/processes/" component={ProcessesLayout} />
       <Route path="/embark/explorer/accounts" component={AccountsContainer} />
       <Route path="/embark/processes" component={ProcessesContainer} />
+      <Route path="/embark/contracts/:contractName/profiler" component={ContractProfileContainer} />
       <Route path="/embark/contracts/:contractName" component={ContractLayout} />
       <Route path="/embark/contracts" component={ContractsContainer} />
       <Route component={NoMatch} />

embark-ui/src/sagas/index.js

@@ -121,6 +121,9 @@ export default function *root() {
     fork(watchFetchBlocks),
     fork(watchFetchContracts),
     fork(watchFetchContract),
+    fork(watchFetchTransaction),
+    fork(watchFetchContractProfile),
+    fork(watchFetchTransactions)
   ]);
 }
 
@@ -153,3 +156,21 @@ export function *fetchContracts() {
 export function *watchFetchContracts() {
   yield takeEvery(actions.FETCH_CONTRACTS, fetchContracts);
 }
+
+export function *fetchContractProfile(action) {
+  console.dir("** fetchContractProfile");
+  console.dir(action);
+  try {
+    const profile = yield call(api.fetchContractProfile, action.contractName);
+    yield put(actions.receiveContractProfile(profile));
+  } catch (e) {
+    console.dir(e);
+    yield put(actions.receiveContractError());
+  }
+}
+
+export function *watchFetchContractProfile() {
+  console.dir("** watchFetchContractProfile");
+  yield takeEvery(actions.FETCH_CONTRACT_PROFILE, fetchContractProfile);
+}
+