add contracts and contract page

embark-ui/src/actions/index.js

@@ -78,6 +78,18 @@ export const RECEIVE_NEW_PROCESS_LOG = 'RECEIVE_NEW_PROCESS_LOG';
 export const RECEIVE_PROCESS_LOGS_ERROR = 'RECEIVE_PROCESS_LOGS_ERROR';
 // BlockHeader
 export const INIT_BLOCK_HEADER = 'INIT_BLOCK_HEADER';
+// Contracts
+export const FETCH_CONTRACTS = 'FETCH_CONTRACTS';
+export const RECEIVE_CONTRACTS = 'RECEIVE_CONTRACTS';
+export const RECEIVE_CONTRACTS_ERROR = 'RECEIVE_CONTRACTS_ERROR';
+// Contract
+export const FETCH_CONTRACT = 'FETCH_CONTRACT';
+export const RECEIVE_CONTRACT = 'RECEIVE_CONTRACT';
+export const RECEIVE_CONTRACT_ERROR = 'RECEIVE_CONTRACT_ERROR';
+// Contract Profile
+export const FETCH_CONTRACT_PROFILE = 'FETCH_CONTRACT_PROFILE';
+export const RECEIVE_CONTRACT_PROFILE = 'RECEIVE_CONTRACT_PROFILE';
+export const RECEIVE_CONTRACT_PROFILE_ERROR = 'RECEIVE_CONTRACT_PROFILE_ERROR';
 
 export function fetchProcessLogs(processName) {
   return {
@@ -113,3 +125,64 @@ export function initBlockHeader(){
     type: INIT_BLOCK_HEADER
   };
 }
+
+export function fetchContractProfile() {
+  return {
+    type: FETCH_CONTRACT_PROFILE
+  };
+}
+
+export function receiveContractProfile(profile) {
+  return {
+    type: RECEIVE_CONTRACT_PROFILE,
+    profile
+  };
+}
+
+export function receiveContractProfileError() {
+  return {
+    type: RECEIVE_CONTRACT_PROFILE_ERROR
+  };
+}
+
+export function fetchContract(contractName) {
+  return {
+    type: FETCH_CONTRACT,
+    contractName
+  };
+}
+
+export function receiveContract(contractName, contract) {
+  return {
+    type: RECEIVE_CONTRACT,
+    contractName,
+    contract
+  };
+}
+
+export function receiveContractError() {
+  return {
+    type: RECEIVE_CONTRACT_ERROR
+  };
+}
+
+
+export function fetchContracts() {
+  return {
+    type: FETCH_CONTRACTS
+  };
+}
+
+export function receiveContracts(contracts) {
+  return {
+    type: RECEIVE_CONTRACTS,
+    contracts
+  };
+}
+
+export function receiveContractsError() {
+  return {
+    type: RECEIVE_CONTRACTS_ERROR
+  };
+}
+

embark-ui/src/api/index.js

@@ -64,3 +64,15 @@ export function webSocketProcess(processName) {
 export function webSocketBlockHeader() {
   return new WebSocket(`${constants.wsEndpoint}/blockchain/blockHeader`);
 }
+
+export function fetchContract(contractName) {
+  return axios.get('http://localhost:8000/embark-api/contract/' + contractName);
+}
+
+export function fetchContracts() {
+  return axios.get('http://localhost:8000/embark-api/contracts');
+}
+
+export function fetchContractProfile(contractName) {
+  return axios.get('http://localhost:8000/embark-api/profiler/' + contractName);
+}

embark-ui/src/components/Contract.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+const Contract = ({contract}) => (
+  <React.Fragment>
+    <h1>Contract</h1>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Address</th>
+          <th>State</th>
+        </tr>
+      </thead>
+      <tbody>
+        return (
+          <tr>
+            <td>{contract.name}</td>
+            <td>{contract.address}</td>
+            <td>{contract.deploy}</td>
+          </tr>
+        )
+      </tbody>
+    </table>
+  </React.Fragment>
+);
+
+export default Contract;
+

embark-ui/src/components/Contracts.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+const Contracts = ({contracts}) => (
+  <React.Fragment>
+    <h1>Contracts</h1>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Address</th>
+          <th>State</th>
+        </tr>
+      </thead>
+      <tbody>
+        {contracts.map((contract) => {
+          return (
+            <tr>
+              <td><Link to={`contracts/${contract.name}`}>{contract.name}</Link></td>
+              <td>{contract.address}</td>
+              <td>{contract.deploy}</td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  </React.Fragment>
+);
+
+export default Contracts;
+

embark-ui/src/containers/ContractContainer.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { fetchContract } from '../actions';
+import Contract from '../components/Contract';
+
+class ContractContainer extends Component {
+  componentWillMount() {
+    console.dir("----");
+    console.dir(this.props);
+    console.dir(this.state);
+    this.props.fetchContract(this.props.contractName);
+  }
+
+  render() {
+    //const { contract } = this.props;
+    //if (!contracts.data) {
+    //  return (
+    //    <h1>
+    //      <i>Loading contracts...</i>
+    //    </h1>
+    //  )
+    //}
+
+    //if (contracts.error) {
+    //  return (
+    //    <h1>
+    //      <i>Error API...</i>
+    //    </h1>
+    //  )
+    //}
+
+    return (
+      //<Contract contract={contract} />
+      <div>hello</div>
+    );
+  }
+};
+
+function mapStateToProps(state) {
+  console.dir("---->>>>>");
+  console.dir(arguments);
+  return { contract: state.contract }
+}
+
+export default connect(
+  mapStateToProps,
+  {
+    fetchContract
+  },
+)(ContractContainer)
+

embark-ui/src/containers/ContractsContainer.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { fetchContracts } from '../actions';
+import Contracts from '../components/Contracts';
+
+class ContractsContainer extends Component {
+  componentWillMount() {
+    this.props.fetchContracts();
+  }
+
+  render() {
+    const { contracts } = this.props;
+    if (!contracts.data) {
+      return (
+        <h1>
+          <i>Loading contracts...</i>
+        </h1>
+      )
+    }
+
+    if (contracts.error) {
+      return (
+        <h1>
+          <i>Error API...</i>
+        </h1>
+      )
+    }
+
+    return (
+      <Contracts contracts={contracts.data} />
+    );
+  }
+};
+
+function mapStateToProps(state) {
+  return { contracts: state.contracts }
+}
+
+export default connect(
+  mapStateToProps,
+  {
+    fetchContracts
+  },
+)(ContractsContainer)
+

embark-ui/src/reducers/contractReducer.js

@@ -0,0 +1,12 @@
+import {RECEIVE_CONTRACT, RECEIVE_CONTRACT_ERROR} from "../actions";
+
+export default function contract(state = {}, action) {
+  switch (action.type) {
+    case RECEIVE_CONTRACT:
+      return Object.assign({}, state, {data: action.contract.data});
+    case RECEIVE_CONTRACT_ERROR:
+      return Object.assign({}, state, {error: true});
+    default:
+      return state;
+  }
+}

embark-ui/src/reducers/contractsReducer.js

@@ -0,0 +1,12 @@
+import {RECEIVE_CONTRACTS, RECEIVE_CONTRACTS_ERROR} from "../actions";
+
+export default function contracts(state = {}, action) {
+  switch (action.type) {
+    case RECEIVE_CONTRACTS:
+      return Object.assign({}, state, {data: action.contracts.data});
+    case RECEIVE_CONTRACTS_ERROR:
+      return Object.assign({}, state, {error: true});
+    default:
+      return state;
+  }
+}

embark-ui/src/reducers/index.js

@@ -4,13 +4,15 @@ import accountsReducer from './accountsReducer';
 import blocksReducer from './blocksReducer';
 import transactionsReducer from './transactionsReducer';
 import commandsReducer from './commandsReducer';
+import contractsReducer from './contractsReducer';
 
 const rootReducer = combineReducers({
   accounts: accountsReducer,
   processes: processesReducer,
   blocks: blocksReducer,
   transactions: transactionsReducer,
-  commands: commandsReducer
+  commands: commandsReducer,
+  contracts: contractsReducer
 });
 
 export default rootReducer;

embark-ui/src/routes.js

@@ -2,6 +2,9 @@ import React from 'react';
 import {Route, Switch} from 'react-router-dom';
 
 import HomeContainer from './containers/HomeContainer';
+import AccountsContainer from './containers/AccountsContainer';
+import ContractsContainer from './containers/ContractsContainer';
+import ContractContainer from './containers/ContractContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
 import ProcessesLayout from './components/ProcessesLayout';
@@ -12,6 +15,9 @@ const routes = (
       <Route exact path="/embark/" component={HomeContainer} />
       <Route path="/embark/explorer/" component={ExplorerLayout} />
       <Route path="/embark/processes/" component={ProcessesLayout} />
+      <Route path="/embark/explorer/accounts" component={AccountsContainer} />
+      <Route path="/embark/contracts/:contractName" component={ContractContainer} />
+      <Route path="/embark/contracts" component={ContractsContainer} />
       <Route component={NoMatch} />
     </Switch>
   </React.Fragment>

embark-ui/src/sagas/index.js

@@ -114,10 +114,38 @@ export default function *root() {
     fork(watchFetchProcesses),
     fork(watchFetchProcessLogs),
     fork(watchListenToProcessLogs),
-    fork(watchFetchBlocks),
     fork(watchFetchBlock),
-    fork(watchFetchTransactions),
+    fork(watchFetchTransactions)
     fork(watchFetchTransaction),
     fork(watchPostCommand)
+    fork(watchFetchBlocks),
+    fork(watchFetchContracts),
+    fork(watchFetchContract),
   ]);
 }
+
+export function *fetchContract(action) {
+  try {
+    const contract = yield call(api.fetchContract);
+    yield put(actions.receiveContract(contract));
+  } catch (e) {
+    yield put(actions.receiveContractError());
+  }
+}
+
+export function *watchFetchContract() {
+  yield takeEvery(actions.FETCH_CONTRACT, fetchContract);
+}
+
+export function *fetchContracts() {
+  try {
+    const contracts = yield call(api.fetchContracts);
+    yield put(actions.receiveContracts(contracts));
+  } catch (e) {
+    yield put(actions.receiveContractsError());
+  }
+}
+
+export function *watchFetchContracts() {
+  yield takeEvery(actions.FETCH_CONTRACTS, fetchContracts);
+}

lib/modules/contracts_manager/index.js

@@ -69,16 +69,19 @@ class ContractsManager {
 
     self.events.setCommandHandler("contracts:all", (contractName, cb) => {
       let contracts = self.listContracts();
-      let results = {};
+      let results = [];
+      let i = 0;
       for (let className in contracts) {
         let contract = contracts[className];
 
-        results[className] = {
+        results.push({
+          index: i,
           name: contract.className,
           deploy: contract.deploy,
           error: contract.error,
           address: contract.deployedAddress
-        };
+        });
+        i += 1;
       }
       cb(results);
     });
@@ -97,6 +100,9 @@ class ContractsManager {
       '/embark-api/contracts',
       (req, res) => {
         self.events.request('contracts:all', null, res.send.bind(res));
+        //self.events.request('contracts:list', (err, contracts) => {
+        //  res.send(contracts);
+        //});
       }
     );
   }