fix(cockpit): fix aside not opening correctly and typos

embark-ui/src/components/TextEditorToolbar.js

@@ -6,7 +6,7 @@ import FontAwesomeIcon from 'react-fontawesome';
 
 export const TextEditorToolbarTabs = {
   Interact: { label: 'Interact', icon: 'bolt' },
-  Ietails: { label: 'Details', icon: 'info-cicle' },
+  Details: { label: 'Details', icon: 'info-circle' },
   Debugger: { label: 'Debugger', icon: 'bug' },
   Transactions: { label: 'Transactions', icon: 'list-alt' },
   Browser: { label: 'Browser', icon: 'eye' }

embark-ui/src/containers/EditorContainer.js

@@ -68,7 +68,7 @@ class EditorContainer extends React.Component {
         <Col sm={8} md={this.textEditorMdSize()} className="text-editor-container">
           <TextEditorContainer currentFile={this.props.currentFile} onFileContentChange={(newContent) => this.onFileContentChange(newContent)} />
         </Col>
-        {this.state.currentAsideTab &&
+        {this.state.currentAsideTab.label &&
         <Col sm={12} md={3} className="border-left-0 relative">
           <div className="editor-aside">
             <TextEditorAsideContainer currentAsideTab={this.state.currentAsideTab}

embark-ui/src/containers/TextEditorAsideContainer.js

@@ -18,29 +18,29 @@ class TextEditorAsideContainer extends Component {
   }
 
   renderContent(contract, index) {
-    switch (this.props.currentAsideTab) {
-      case TextEditorToolbarTabs.Debugger:
+    switch (this.props.currentAsideTab.label) {
+      case TextEditorToolbarTabs.Debugger.label:
         return (
           <React.Fragment>
             <h2>{contract.className} - Debugger</h2>
             <ContractDebuggerContainer key={index} contract={contract}/>
           </React.Fragment>
         );
-      case TextEditorToolbarTabs.Details:
+      case TextEditorToolbarTabs.Details.label:
         return (
           <React.Fragment>
             <h2>{contract.className} - Details</h2>
             <ContractDetail key={index} contract={contract}/>
           </React.Fragment>
         );
-      case TextEditorToolbarTabs.Transactions:
+      case TextEditorToolbarTabs.Transactions.label:
         return (
           <React.Fragment>
             <h2>{contract.className} - Transactions</h2>
             <ContractTransactionsContainer key={index} contract={contract}/>
           </React.Fragment>
         );
-      case TextEditorToolbarTabs.Interact:
+      case TextEditorToolbarTabs.Interact.label:
         return (
           <React.Fragment>
             <h2>{contract.className} - Interact</h2>
@@ -53,7 +53,7 @@ class TextEditorAsideContainer extends Component {
   }
 
   render() {
-    if (this.props.currentAsideTab === TextEditorToolbarTabs.Browser) {
+    if (this.props.currentAsideTab.label === TextEditorToolbarTabs.Browser.label) {
       return <Preview/>;
     }
     return this.props.contracts.map((contract, index) => {

lib/modules/contracts_manager/index.js

@@ -271,7 +271,7 @@ class ContractsManager {
       function getGasPriceForNetwork(callback) {
         return callback(null, self.contractsConfig.gasPrice);
       },
-      function prepareContractsFromCompilation(gasPrice, callback) {
+      function prepareContractsForCompilation(gasPrice, callback) {
         let className, compiledContract, contractConfig, contract;
         for (className in self.compiledContracts) {
           compiledContract = self.compiledContracts[className];