showing compilation details in main tab

apps/remix-ide/src/app/plugins/compile-details.tsx

@@ -19,16 +19,25 @@ export class CompilationDetailsPlugin extends ViewPlugin {
   dispatch: React.Dispatch<any> = () => {}
   appManager: RemixAppManager
   element: HTMLDivElement
+  payload: any
   constructor(appManager: RemixAppManager) {
     super(profile)
     this.appManager = appManager
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'compileDetails')
+    this.payload = {
+      contractProperties: {} as any,
+      intl: {} as any,
+      selectedContract: '',
+      help: {} as any,
+      insertValue: {} as any,
+      saveAs: {} as any,
+    }
   }
 
   async onActivation() {
+    await this.call('tabs', 'focus', 'compilationdetails')
     this.renderComponent()
-    // await this.call('tabs', 'focus', 'compilationdetails')
     _paq.push(['trackEvent', 'plugin', 'activated', 'compilationDetails'])
   }
 
@@ -36,8 +45,9 @@ export class CompilationDetailsPlugin extends ViewPlugin {
 
   }
 
-  async showDetails() {
+  async showDetails(sentPayload: any) {
     await this.call('tabs', 'focus', 'compilationdetails')
+    this.payload = sentPayload
     this.renderComponent()
   }
 
@@ -54,8 +64,8 @@ export class CompilationDetailsPlugin extends ViewPlugin {
 
   renderComponent() {
     this.dispatch({
-      ...this
-
+      ...this,
+      ...this.payload
     })
   }
 
@@ -63,6 +73,12 @@ export class CompilationDetailsPlugin extends ViewPlugin {
     return (
       <RemixUiCompileDetails
         plugin={this}
+        contractProperties={state.contractProperties}
+        intl={state.intl}
+        selectedContract={state.selectedContract}
+        saveAs={state.saveAs}
+        help={state.help}
+        insertValue={state.insertValue}
       />
     )
   }

libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx

@@ -1,14 +1,67 @@
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import React from 'react'
 
 export interface RemixUiCompileDetailsProps {
   plugin: any
+  contractProperties: any
+  intl: any
+  selectedContract: string
+  help: any
+  insertValue: any
+  saveAs: any
 }
 
-export function RemixUiCompileDetails({ plugin }: RemixUiCompileDetailsProps) {
+const _paq = (window._paq = window._paq || [])
+
+export function RemixUiCompileDetails({ plugin, contractProperties, intl, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) {
+
+  const downloadFn = () => {
+    _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])
+    saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`)
+  }
   return (
     <>
-      <h1>Compile Details!!!</h1>
-      <h3>Every thing works fine.</h3>
+      <div>
+        <span>{selectedContract}</span><span>Download Compile details</span>
+      </div>
+      <div className="remixui_detailsJSON">
+        <TreeView>
+          {Object.keys(contractProperties).map((propertyName, index) => {
+            const copyDetails = (
+              <span className="remixui_copyDetails">
+                <CopyToClipboard tip={intl.formatMessage({id: 'solidity.copy'})} content={contractProperties[propertyName]} direction="top" />
+              </span>
+            )
+            const questionMark = (
+              <span className="remixui_questionMark">
+                <i
+                  title={intl.formatMessage({
+                    id: `solidity.${propertyName}`,
+                    defaultMessage: help[propertyName]
+                  })}
+                  className="fas fa-question-circle"
+                  aria-hidden="true"
+                ></i>
+              </span>
+            )
+
+            return (
+              <div className="remixui_log" key={index}>
+                <TreeViewItem
+                  label={
+                    <div data-id={`remixui_treeviewitem_${propertyName}`} className="remixui_key">
+                      {propertyName} {copyDetails} {questionMark}
+                    </div>
+                  }
+                >
+                  {insertValue(contractProperties, propertyName)}
+                </TreeViewItem>
+              </div>
+            )
+          })}
+        </TreeView>
+      </div>
     </>
   )
 }

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -41,7 +41,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     //@ts-ignore
     pluginProps
   } = props // eslint-disable-line
-  console.log({ props })
+
   const [state, setState] = useState({
     hideWarnings: false,
     autoCompile: false,
@@ -1182,15 +1182,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </CopyToClipboard>
           </div>
         </div>
-        <button className="btn btn-primary btn-block" onClick={async () => {
-          // console.log('activatePlugin')
-
-          (pluginProps.api as any).call('compilationDetails', 'showDetails')
-        }}>
-          <span>
-            Show Details
-          </span>
-        </button>
       </article>
     </section>
   )

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -156,6 +156,15 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     return <pre className="remixui_value">{node || ''}</pre>
   }
 
+  const payload = {
+    saveAs: saveAs,
+    intl: intl,
+    contractProperties: {},
+    selectedContract: '',
+    help: {},
+    insertValue: insertValue
+  }
+
   const details = () => {
     _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'display'])
     if (!selectedContract) throw new Error('No contract compiled yet')
@@ -182,6 +191,10 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     // Make 'compilerInput' first field to display it as first item in 'Compilation Details' modal
     if (compilerInput) contractProperties.compilerInput = compilerInput
     contractProperties = Object.assign(contractProperties, contractsDetails[selectedContract])
+    payload.contractProperties = contractProperties
+    payload.selectedContract = selectedContract
+    payload.help = help
+    payload.insertValue = insertValue
     const log = (
       <div className="remixui_detailsJSON">
         <TreeView>
@@ -225,7 +238,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
       _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])
       saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`)
     }
-    modal(selectedContract, log, intl.formatMessage({id: 'solidity.download'}), downloadFn, true, intl.formatMessage({id: 'solidity.close'}), null)
+    // modal(selectedContract, log, intl.formatMessage({id: 'solidity.download'}), downloadFn, true, intl.formatMessage({id: 'solidity.close'}), null)
   }
 
   const copyBytecode = () => {
@@ -301,8 +314,9 @@ export const ContractSelection = (props: ContractSelectionProps) => {
             <button
               data-id="compilation-details"
               className="btn btn-secondary btn-block"
-              onClick={() => {
+              onClick={async () => {
                 details()
+                await (api as any).call('compilationDetails', 'showDetails', payload)
               }}
             >
               <CustomTooltip

libs/remix-ui/solidity-compiler/src/lib/css/style.css

@@ -182,7 +182,7 @@
 }
 
 .remixui_solidityCompileAndRunButton {
-  width: 94%;  
+  width: 94%;
 }
 
 @keyframes spin {
@@ -213,7 +213,7 @@
   -o-animation: bounce 2s infinite linear;
   -webkit-animation: bounce 2s infinite linear;
   animation: bounce 2s infinite linear;
-} 
+}
 
 @-webkit-keyframes bounce {
     0% { top: 0; }
@@ -245,3 +245,8 @@
     70% { top: -0.3em; }
     100% { top: 0; }
 }
+
+#compileDetails {
+  margin: 15px;
+  padding: 15px;
+}

libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx

@@ -13,7 +13,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     api,
     api: {currentFile, compileTabLogic, configurationSettings}
   } = props
-  console.log({ props })
+
   const [state, setState] = useState({
     isHardhatProject: false,
     isTruffleProject: false,