Show sources

embark-ui/src/actions/index.js

@@ -104,6 +104,13 @@ export const contractProfile = {
   failure: (error) => action(CONTRACT_PROFILE[FAILURE], {error})
 };
 
+export const CONTRACT_FILE = createRequestTypes('CONTRACT_FILE');
+export const contractFile = {
+  request: (filename) => action(CONTRACT_FILE[REQUEST], {filename}),
+  success: (source, payload) => action(CONTRACT_FILE[SUCCESS], {contractFiles: [{source, filename: payload.filename}]}),
+  failure: (error) => action(CONTRACT_FILE[FAILURE], {error})
+};
+
 export const VERSIONS = createRequestTypes('VERSIONS');
 export const versions = {
   request: () => action(VERSIONS[REQUEST]),

embark-ui/src/api/index.js

@@ -96,6 +96,10 @@ export function postEnsRecord(payload) {
   return post('/ens/register', payload);
 }
 
+export function fetchContractFile(payload) {
+  return get('/files/contracts', {params: payload});
+}
+
 export function listenToChannel(channel) {
   return new WebSocket(`${constants.wsEndpoint}/communication/listenTo/${channel}`);
 }

embark-ui/src/components/ContractLayout.js

@@ -10,8 +10,9 @@ import {
 import ContractContainer from '../containers/ContractContainer';
 import ContractLoggerContainer from '../containers/ContractLoggerContainer';
 import ContractProfileContainer from '../containers/ContractProfileContainer';
+import ContractSourceContainer from '../containers/ContractSourceContainer';
 
-const ContractLayout = (props) => (
+const ContractLayout = ({match}) => (
   <Grid.Row>
     <Grid.Col md={3}>
       <Page.Title className="my-5">Contract</Page.Title>
@@ -19,15 +20,15 @@ const ContractLayout = (props) => (
         <List.Group transparent={true}>
           <List.GroupItem
             className="d-flex align-items-center"
-            to={`/embark/contracts/${props.match.params.contractName}/overview`}
+            to={`/embark/contracts/${match.params.contractName}/overview`}
             icon="corner-left-up"
             RootComponent={withRouter(NavLink)}
           >
-            Back to {props.match.params.contractName}
+            Back to {match.params.contractName}
           </List.GroupItem>
           <List.GroupItem
             className="d-flex align-items-center"
-            to={`/embark/contracts/${props.match.params.contractName}/deployment`}
+            to={`/embark/contracts/${match.params.contractName}/deployment`}
             icon="users"
             RootComponent={withRouter(NavLink)}
           >
@@ -35,7 +36,7 @@ const ContractLayout = (props) => (
           </List.GroupItem>
           <List.GroupItem
             className="d-flex align-items-center"
-            to={`/embark/contracts/${props.match.params.contractName}/functions`}
+            to={`/embark/contracts/${match.params.contractName}/functions`}
             icon="book-open"
             RootComponent={withRouter(NavLink)}
           >
@@ -43,7 +44,7 @@ const ContractLayout = (props) => (
           </List.GroupItem>
           <List.GroupItem
             className="d-flex align-items-center"
-            to={`/embark/contracts/${props.match.params.contractName}/source`}
+            to={`/embark/contracts/${match.params.contractName}/source`}
             icon="activity"
             RootComponent={withRouter(NavLink)}
           >
@@ -51,7 +52,7 @@ const ContractLayout = (props) => (
           </List.GroupItem>
           <List.GroupItem
             className="d-flex align-items-center"
-            to={`/embark/contracts/${props.match.params.contractName}/profiler`}
+            to={`/embark/contracts/${match.params.contractName}/profiler`}
             icon="server"
             RootComponent={withRouter(NavLink)}
           >
@@ -59,7 +60,7 @@ const ContractLayout = (props) => (
           </List.GroupItem>
           <List.GroupItem
             className="d-flex align-items-center"
-            to={`/embark/contracts/${props.match.params.contractName}/logger`}
+            to={`/embark/contracts/${match.params.contractName}/logger`}
             icon="chevrons-right"
             RootComponent={withRouter(NavLink)}
           >
@@ -70,9 +71,10 @@ const ContractLayout = (props) => (
     </Grid.Col>
     <Grid.Col md={9}>
       <Switch>
-        <Route exact path="/embark/contracts/:contractName/logger" component={ContractLoggerContainer} />
+        <Route exact path="/embark/contracts/:contractName/overview" component={ContractContainer} />
+        <Route exact path="/embark/contracts/:contractName/source" component={ContractSourceContainer} />
         <Route exact path="/embark/contracts/:contractName/profiler" component={ContractProfileContainer} />
-        <ContractContainer />
+        <Route exact path="/embark/contracts/:contractName/logger" component={ContractLoggerContainer} />
       </Switch>
     </Grid.Col>
   </Grid.Row>

embark-ui/src/components/Contracts.js

@@ -24,7 +24,7 @@ const Contracts = ({contracts}) => (
             bodyItems={
               contracts.map((contract) => {
                 return ([
-                  {content: <Link to={`contracts/${contract.className}`}>{contract.className}</Link>},
+                  {content: <Link to={`/embark/contracts/${contract.className}/overview`}>{contract.className}</Link>},
                   {content: contract.address},
                   {content: contract.deploy.toString()}
                 ]);

embark-ui/src/components/Fiddle.js

@@ -14,7 +14,7 @@ class Fiddle extends React.Component {
 
   render() {
     const {onCodeChange, value, errors, warnings} = this.props;
-    const annotations = errors.map((error) => { return error.annotation; }).concat(warnings.map(warning => { return warning.annotation; }));
+    const annotations = errors && errors.map((error) => { return error.annotation; }).concat(warnings.map(warning => { return warning.annotation; }));
     return (
       <React.Fragment>
 

embark-ui/src/containers/AppContainer.js

@@ -9,7 +9,6 @@ import routes from '../routes';
 
 import {
   initBlockHeader,
-  contracts as contractsAction,
   processes as processesAction,
   versions as versionsAction,
   plugins as pluginsAction
@@ -19,7 +18,6 @@ class AppContainer extends Component {
   componentDidMount() {
     this.props.initBlockHeader();
     this.props.fetchProcesses();
-    this.props.fetchContracts();
     this.props.fetchVersions();
     this.props.fetchPlugins();
   }
@@ -37,7 +35,6 @@ class AppContainer extends Component {
 
 AppContainer.propTypes = {
   initBlockHeader: PropTypes.func,
-  fetchContracts: PropTypes.func,
   fetchProcesses: PropTypes.func,
   fetchPlugins: PropTypes.func,
   fetchVersions: PropTypes.func
@@ -48,7 +45,7 @@ export default connect(
   {
     initBlockHeader,
     fetchProcesses: processesAction.request,
-    fetchContracts: contractsAction.request,
+
     fetchVersions: versionsAction.request,
     fetchPlugins: pluginsAction.request
   },

embark-ui/src/containers/ContractContainer.js

@@ -9,10 +9,6 @@ import DataWrapper from "../components/DataWrapper";
 import {getContract} from "../reducers/selectors";
 
 class ContractContainer extends Component {
-  componentDidMount() {
-    this.props.fetchContract(this.props.match.params.contractName);
-  }
-
   render() {
     return (
       <DataWrapper shouldRender={this.props.contract !== undefined } {...this.props} render={({contract}) => (
@@ -33,7 +29,6 @@ function mapStateToProps(state, props) {
 ContractContainer.propTypes = {
   match: PropTypes.object,
   contract: PropTypes.object,
-  fetchContract: PropTypes.func,
   error: PropTypes.string
 };
 

embark-ui/src/containers/ContractLayoutContainer.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {withRouter} from 'react-router-dom';
+
+import {contract as contractAction} from '../actions';
+import ContractLayout from '../components/ContractLayout';
+import {getContract} from "../reducers/selectors";
+
+class ContractLayoutContainer extends Component {
+  componentDidMount() {
+    this.props.fetchContract(this.props.match.params.contractName);
+  }
+
+  render() {
+    if (this.props.contract){
+      return <ContractLayout />;
+    } else {
+      return <React.Fragment />;
+    }
+  }
+}
+
+function mapStateToProps(state, props) {
+  return {
+    contract: getContract(state, props.match.params.contractName),
+    error: state.errorMessage,
+    loading: state.loading
+  };
+}
+
+ContractLayoutContainer.propTypes = {
+  match: PropTypes.object,
+  contract: PropTypes.object,
+  fetchContract: PropTypes.func,
+  error: PropTypes.string
+};
+
+export default withRouter(connect(
+  mapStateToProps,
+  {
+    fetchContract: contractAction.request
+  }
+)(ContractLayoutContainer));

embark-ui/src/containers/ContractSourceContainer.js

@@ -0,0 +1,53 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {withRouter} from 'react-router-dom';
+import {Page} from "tabler-react";
+
+import {contractFile as contractFileAction} from '../actions';
+import DataWrapper from "../components/DataWrapper";
+import Fiddle from "../components/Fiddle";
+import {getContract, getContractFile} from "../reducers/selectors";
+
+class ContractSourceContainer extends Component {
+  componentDidMount() {
+    this.props.fetchContractFile(this.props.contract.originalFilename);
+  }
+
+  render() {
+    return (
+      <Page.Content title={`${this.props.contract.className} Source`}>
+        <DataWrapper shouldRender={this.props.contractFile !== undefined } {...this.props} render={({contractFile}) => (
+          <Fiddle value={contractFile.source} />
+        )} />
+      </Page.Content>
+    );
+  }
+}
+
+function mapStateToProps(state, props) {
+  const contract = getContract(state, props.match.params.contractName);
+  const contractFile = getContractFile(state, contract.originalFilename);
+
+  return {
+    contract,
+    contractFile,
+    error: state.errorMessage,
+    loading: state.loading
+  };
+}
+
+ContractSourceContainer.propTypes = {
+  match: PropTypes.object,
+  contract: PropTypes.object,
+  contractFile: PropTypes.object,
+  fetchContractFile: PropTypes.func,
+  error: PropTypes.string
+};
+
+export default withRouter(connect(
+  mapStateToProps,
+  {
+    fetchContractFile: contractFileAction.request
+  }
+)(ContractSourceContainer));

embark-ui/src/containers/ContractsContainer.js

@@ -1,12 +1,17 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
+import {contracts as contractsAction} from "../actions";
 
 import Contracts from '../components/Contracts';
 import DataWrapper from "../components/DataWrapper";
 import {getContracts} from "../reducers/selectors";
 
 class ContractsContainer extends Component {
+  componentDidMount() {
+    this.props.fetchContracts();
+  }
+
   render() {
     return (
       <DataWrapper shouldRender={this.props.contracts.length > 0} {...this.props} render={({contracts}) => (
@@ -21,9 +26,12 @@ function mapStateToProps(state) {
 }
 
 ContractsContainer.propTypes = {
-  contracts: PropTypes.array
+  contracts: PropTypes.array,
+  fetchContracts: PropTypes.func,
 };
 
 export default connect(
-  mapStateToProps
+  mapStateToProps,{
+    fetchContracts: contractsAction.request
+  }
 )(ContractsContainer);

embark-ui/src/reducers/index.js

@@ -12,6 +12,7 @@ const entitiesDefaultState = {
   processLogs: [],
   contracts: [],
   contractProfiles: [],
+  contractFiles: [],
   contractLogs: [],
   commands: [],
   messages: [],
@@ -47,6 +48,9 @@ const filtrer = {
   contracts: function(contract, index, self) {
     return index === self.findIndex((t) => t.className === contract.className);
   },
+  contractFiles: function(contractFile, index, self) {
+    return index === self.findIndex((c) => c.filename === contractFile.filename);
+  },
   accounts: function(account, index, self) {
     return index === self.findIndex((t) => t.address === account.address);
   },
@@ -95,7 +99,6 @@ function errorMessage(state = null, action) {
   return action.error || state;
 }
 
-/* eslint multiline-ternary: "off" */
 function errorEntities(state = {}, action) {
   if (!action.type.endsWith(SUCCESS)) {
     return state;

embark-ui/src/reducers/selectors.js

@@ -62,6 +62,10 @@ export function getContractProfile(state, contractName) {
   return state.entities.contractProfiles.find((contractProfile => contractProfile.name === contractName));
 }
 
+export function getContractFile(state, filename) {
+  return state.entities.contractFiles.find((contractFile => contractFile.filename === filename));
+}
+
 export function getVersions(state) {
   return state.entities.versions;
 }

embark-ui/src/routes.js

@@ -2,12 +2,11 @@ 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/ContractLayoutContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
 import ProcessesLayout from './components/ProcessesLayout';
-import ContractLayout from './components/ContractLayout';
 import FiddleContainer from './containers/FiddleContainer';
 
 const routes = (
@@ -16,8 +15,7 @@ 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={ContractLayout} />
+      <Route path="/embark/contracts/:contractName" component={ContractContainer} />
       <Route path="/embark/contracts" component={ContractsContainer} />
       <Route path="/embark/fiddle" component={FiddleContainer} />
       <Route component={NoMatch} />

embark-ui/src/sagas/index.js

@@ -5,7 +5,7 @@ import {all, call, fork, put, takeEvery, take} from 'redux-saga/effects';
 
 const {account, accounts, block, blocks, transaction, transactions, processes, commands, processLogs,
        contracts, contract, contractProfile, messageSend, versions, plugins, messageListen, fiddle,
-       ensRecord, ensRecords, contractLogs} = actions;
+       ensRecord, ensRecords, contractLogs, contractFile} = actions;
 
 function *doRequest(entity, apiFn, payload) {
   const {response, error} = yield call(apiFn, payload);
@@ -31,6 +31,7 @@ export const fetchContractLogs = doRequest.bind(null, contractLogs, api.fetchCon
 export const fetchContracts = doRequest.bind(null, contracts, api.fetchContracts);
 export const fetchContract = doRequest.bind(null, contract, api.fetchContract);
 export const fetchContractProfile = doRequest.bind(null, contractProfile, api.fetchContractProfile);
+export const fetchContractFile = doRequest.bind(null, contractFile, api.fetchContractFile);
 export const fetchFiddle = doRequest.bind(null, fiddle, api.fetchFiddle);
 export const sendMessage = doRequest.bind(null, messageSend, api.sendMessage);
 export const fetchEnsRecord = doRequest.bind(null, ensRecord, api.fetchEnsRecord);
@@ -88,6 +89,10 @@ export function *watchFetchContractProfile() {
   yield takeEvery(actions.CONTRACT_PROFILE[actions.REQUEST], fetchContractProfile);
 }
 
+export function *watchFetchContractFile() {
+  yield takeEvery(actions.CONTRACT_FILE[actions.REQUEST], fetchContractFile);
+}
+
 export function *watchFetchVersions() {
   yield takeEvery(actions.VERSIONS[actions.REQUEST], fetchVersions);
 }
@@ -193,11 +198,12 @@ export default function *root() {
     fork(watchFetchPlugins),
     fork(watchFetchBlocks),
     fork(watchFetchContracts),
+    fork(watchFetchContractProfile),
+    fork(watchFetchContractFile),
     fork(watchListenToMessages),
     fork(watchSendMessage),
     fork(watchFetchContract),
     fork(watchFetchTransaction),
-    fork(watchFetchContractProfile),
     fork(watchFetchFiddle),
     fork(watchFetchEnsRecord),
     fork(watchPostEnsRecords)