resolve conflict with Logger name

embark-ui/src/components/ContractDebugger.js

@@ -64,7 +64,7 @@ class ContractDebugger extends Component {
           <Col>
             <br /><strong>Scopes</strong>
             <div>
-              <ReactJson src={{locals: this.props.debuggerInfo.locals, contract: this.props.debuggerInfo.contract, globals: this.props.debuggerInfo.globals}} theme="monokai" sortKeys={true} name={false} collapse={1} style={{"overflow-x": "auto"}} shouldCollapse={(field) => { return (field.name === 'globals') }} />
+              <ReactJson src={{locals: this.props.debuggerInfo.locals, contract: this.props.debuggerInfo.contract, globals: this.props.debuggerInfo.globals}} theme="monokai" sortKeys={true} name={false} collapse={1} style={{"overflowX": "auto"}} shouldCollapse={(field) => { return (field.name === 'globals'); }} />
             </div>
           </Col>
         </Row>

embark-ui/src/components/ContractLayout.js

@@ -4,7 +4,7 @@ import { TabContent, TabPane, Nav, NavItem, NavLink, Card, CardBody, CardTitle }
 import classnames from 'classnames';
 
 import ContractDetail from '../components/ContractDetail';
-import ContractLoggerContainer from '../containers/ContractLoggerContainer';
+import ContractTransactionsContainer from '../containers/ContractTransactionsContainer';
 import ContractOverviewContainer from '../containers/ContractOverviewContainer';
 import ContractDebuggerContainer from '../containers/ContractDebuggerContainer';
 
@@ -53,7 +53,7 @@ class ContractLayout extends React.Component {
                   className={classnames({ active: this.state.activeTab === '3' })}
                   onClick={() => { this.toggle('3'); }}
                 >
-                  Logger
+                  Transactions
                 </NavLink>
               </NavItem>
               <NavItem>
@@ -73,7 +73,7 @@ class ContractLayout extends React.Component {
                 <ContractDetail contract={this.props.contract} />
               </TabPane>
               <TabPane tabId="3">
-                <ContractLoggerContainer contract={this.props.contract} />
+                <ContractTransactionsContainer contract={this.props.contract} />
               </TabPane>
               <TabPane tabId="4">
                 <ContractDebuggerContainer contract={this.props.contract} />

embark-ui/src/components/ContractOverview.css

@@ -9,3 +9,8 @@
   border: 0;
   box-shadow: none !important;
 }
+
+.contract-function-container .card-header.closed {
+  border-bottom: none;
+  border-radius: 0.25rem;
+}

embark-ui/src/components/ContractOverview.js

@@ -97,12 +97,13 @@ class ContractFunction extends Component {
   render() {
     return (
       <Card className="contract-function-container">
-        <CardHeader className={classnames({
+        <CardHeader
-          collapsable: !ContractFunction.isEvent(this.props.method),
+          className={classnames({
-          'border-bottom-0': !this.state.functionCollapse,
+            collapsable: !ContractFunction.isEvent(this.props.method),
-          'rounded': !this.state.functionCollapse
+            'border-bottom-0': !this.state.functionCollapse,
-        })}
+            'rounded': !this.state.functionCollapse
-                    onClick={() => this.toggleFunction()}>
+          })}
+          onClick={() => this.toggleFunction()}>
           <CardTitle>
             {ContractFunction.isPureCall(this.props.method) && Boolean(this.props.method.inputs.length) &&
             <Badge color="warning" className="float-right p-2">call</Badge>

embark-ui/src/components/ContractTransactions.js

@@ -9,7 +9,7 @@ const CONSTRUCTOR = 'constructor';
 const PURE = 'pure';
 const VIEW = 'view';
 
-class ContractLogger extends React.Component {
+class ContractTransactions extends React.Component {
   constructor(props) {
     super(props);
     this.state = {method: '', event: '', status: TX_STATES['Any']};
@@ -139,11 +139,11 @@ class ContractLogger extends React.Component {
   }
 }
 
-ContractLogger.propTypes = {
+ContractTransactions.propTypes = {
   contractLogs: PropTypes.array,
   contractEvents: PropTypes.array,
   contract: PropTypes.object.isRequired
 };
 
-export default ContractLogger;
+export default ContractTransactions;
 

embark-ui/src/components/FileExplorer.js

@@ -163,9 +163,9 @@ class FileExplorer extends React.Component {
     let newNodes;
     if (toggled) {
       newNodes = this.state.activeNodes;
-      newNodes.push(node)
+      newNodes.push(node);
     } else {
-      newNodes = this.state.activeNodes.filter(n => !this.nodeEquals(node, n))
+      newNodes = this.state.activeNodes.filter(n => !this.nodeEquals(node, n));
     }
     this.setState({activeNodes: newNodes});
   }
@@ -215,7 +215,7 @@ class FileExplorer extends React.Component {
         />
 
         <Label className="hidden-toogle mb-0 pt-2 pr-2 pb-1 border-top text-right">
-          <span className="mr-2 align-top" style={{"font-size": "12px"}}>Show hidden files</span>
+          <span className="mr-2 align-top" style={{"fontSize": "12px"}}>Show hidden files</span>
           <AppSwitch color="success" variant="pill" size="sm" onChange={this.props.toggleShowHiddenFiles}/>
         </Label>
        </div>

embark-ui/src/components/TextEditorToolbar.js

@@ -7,7 +7,7 @@ import FontAwesomeIcon from 'react-fontawesome';
 const TextEditorToolbarTabs = {
   Overview: 'overview',
   Detail: 'detail',
-  Logger: 'logger',
+  Transactions: 'transactions',
   Debugger: 'debugger',
   Browser: 'browser'
 };
@@ -41,8 +41,8 @@ class TextEditorToolbar extends Component {
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
                   <FontAwesomeIcon className="mr-2" name="info-circle" /> Details
                 </NavLink>
-                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Logger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Logger)}>
+                <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Logger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Transactions)}>
-                  <FontAwesomeIcon className="mr-2" name="list-alt" /> Logger</NavLink>
+                  <FontAwesomeIcon className="mr-2" name="list-alt" /> Transactions</NavLink>
                 </NavLink>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Debugger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Debugger)}>
                   <FontAwesomeIcon className="mr-2" name="bug" /> Debugger

embark-ui/src/containers/ContractTransactionsContainer.js

@@ -3,11 +3,11 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import {contractEvents as contractEventsAction, contractLogs as contractLogsAction, listenToContractLogs, listenToContractEvents} from '../actions';
 
-import ContractLogger from '../components/ContractLogger';
+import ContractTransactions from '../components/ContractTransactions';
 import DataWrapper from "../components/DataWrapper";
 import {getContractLogsByContract, getContractEventsByContract} from "../reducers/selectors";
 
-class ContractLoggerContainer extends Component {
+class ContractTransactionsContainer extends Component {
   componentDidMount() {
     if (this.props.contractLogs.length === 0) {
       this.props.listenToContractLogs();
@@ -23,9 +23,9 @@ class ContractLoggerContainer extends Component {
   render() {
     return (
       <DataWrapper shouldRender={this.props.contractLogs !== undefined } {...this.props} render={() => (
-        <ContractLogger contractLogs={this.props.contractLogs} 
+        <ContractTransactions contractLogs={this.props.contractLogs}
-                        contractEvents={this.props.contractEvents}
+                              contractEvents={this.props.contractEvents}
-                        contract={this.props.contract}/>
+                              contract={this.props.contract}/>
       )} />
     );
   }
@@ -38,7 +38,7 @@ function mapStateToProps(state, props) {
   };
 }
 
-ContractLoggerContainer.propTypes = {
+ContractTransactionsContainer.propTypes = {
   contract: PropTypes.object,
   contractLogs: PropTypes.array,
   contractEvents: PropTypes.array,
@@ -57,4 +57,4 @@ export default connect(
     fetchContractEvents: contractEventsAction.request,
     listenToContractEvents: listenToContractEvents
   }
-)(ContractLoggerContainer);
+)(ContractTransactionsContainer);

embark-ui/src/containers/EditorContainer.css

@@ -25,8 +25,3 @@
   overflow-x: hidden;
   overflow-y: auto;
 }
-
-.contract-function-container .card-header.closed {
-  border-bottom: none;
-  border-radius: 0.25rem;
-}

embark-ui/src/containers/EditorContainer.js

@@ -49,7 +49,7 @@ class EditorContainer extends React.Component {
   }
 
   textEditorMdSize() {
-    return this.state.currentAsideTab.length ? 7 : 10
+    return this.state.currentAsideTab.length ? 7 : 10;
   }
 
   textEditorXsSize() {

embark-ui/src/containers/TextEditorAsideContainer.js

@@ -7,7 +7,7 @@ import Preview from '../components/Preview';
 import {contracts as contractsAction} from '../actions';
 import {getContractsByPath} from "../reducers/selectors";
 import ContractDetail from '../components/ContractDetail';
-import ContractLoggerContainer from '../containers/ContractLoggerContainer';
+import ContractTransactionsContainer from './ContractTransactionsContainer';
 import ContractOverviewContainer from '../containers/ContractOverviewContainer';
 import ContractDebuggerContainer from '../containers/ContractDebuggerContainer';
 
@@ -18,8 +18,6 @@ class TextEditorAsideContainer extends Component {
 
   renderContent(contract, index) {
     switch (this.props.currentAsideTab) {
-      case 'browser':
-        return <Preview/>;
       case 'debugger':
         return (
           <React.Fragment>
@@ -34,11 +32,11 @@ class TextEditorAsideContainer extends Component {
             <ContractDetail key={index} contract={contract}/>
           </React.Fragment>
         );
-      case 'logger':
+      case 'transactions':
         return (
           <React.Fragment>
             <h2>{contract.className} - Transactions</h2>
-            <ContractLoggerContainer key={index} contract={contract}/>
+            <ContractTransactionsContainer key={index} contract={contract}/>
           </React.Fragment>
         );
       case 'overview':
@@ -54,6 +52,9 @@ class TextEditorAsideContainer extends Component {
   }
 
   render() {
+    if (this.props.currentAsideTab === 'browser') {
+      return <Preview/>;
+    }
     return this.props.contracts.map((contract, index) => {
       return (
         <Card key={'contract-' + index} className="editor-aside-card rounded-0 border-top-0">