testing loading of mainpanel plugin

apps/remix-ide/src/app.js

@@ -46,6 +46,7 @@ import {InjectedSKALEChaosTestnetProvider} from './app/providers/injected-skale-
 import {FileDecorator} from './app/plugins/file-decorator'
 import {CodeFormat} from './app/plugins/code-format'
 import {SolidityUmlGen} from './app/plugins/solidity-umlgen'
+import { CompilationDetailsPlugin } from './app/plugins/compile-details'
 import {ContractFlattener} from './app/plugins/contractFlattener'
 import {OpenAIGpt} from './app/plugins/openaigpt'
 
@@ -179,6 +180,9 @@ class AppComponent {
     //---------------- Solidity UML Generator -------------------------
     const solidityumlgen = new SolidityUmlGen(appManager)
 
+    // ----------------- Compilation Details ----------------------------
+    const compilationDetails = new CompilationDetailsPlugin(appManager)
+
     // ----------------- ContractFlattener ----------------------------
     const contractFlattener = new ContractFlattener()
 
@@ -303,6 +307,7 @@ class AppComponent {
       this.walkthroughService,
       search,
       solidityumlgen,
+      compilationDetails,
       contractFlattener,
       solidityScript,
       openaigpt

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { ViewPlugin } from '@remixproject/engine-web'
+import {PluginViewWrapper} from '@remix-ui/helper'
+import { RemixAppManager } from '../../remixAppManager'
+import { RemixUiCompileDetails } from '@remix-ui/solidity-compile-details'
+
+const _paq = (window._paq = window._paq || [])
+
+const profile = {
+  name: 'compilationdetails',
+  displayName: 'Solidity Compile Details',
+  description: 'Displays details from solidity compiler',
+  location: 'mainPanel',
+  methods: ['showDetails'],
+  events: []
+}
+
+export class CompilationDetailsPlugin extends ViewPlugin {
+  dispatch: React.Dispatch<any> = () => {}
+  appManager: RemixAppManager
+  element: HTMLDivElement
+  constructor(appManager: RemixAppManager) {
+    super(profile)
+    this.appManager = appManager
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'compileDetails')
+  }
+
+  async onActivation() {
+    this.renderComponent()
+    await this.call('tabs', 'focus', 'compilationdetails')
+  }
+
+  onDeactivation(): void {
+
+  }
+
+  async showDetails() {
+    await this.call('tabs', 'focus', 'compilationdetails')
+    this.renderComponent()
+  }
+
+  setDispatch(dispatch: React.Dispatch<any>): void {
+    this.dispatch = dispatch
+  }
+  render() {
+    return (
+      <div id="compileDetails">
+        <PluginViewWrapper plugin={this} />
+      </div>
+    )
+  }
+
+  renderComponent() {
+    this.dispatch({
+      ...this
+
+    })
+  }
+
+  updateComponent(state: any) {
+    return (
+      <RemixUiCompileDetails
+        plugin={this}
+      />
+    )
+  }
+
+}

apps/remix-ide/src/remixAppManager.js

@@ -71,6 +71,7 @@ const requiredModules = [
   'codeParser',
   'codeFormatter',
   'solidityumlgen',
+  'compilationDetails',
   'contractflattener',
   'solidity-script',
   'openaigpt'

libs/remix-ui/solidity-compile-details/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/solidity-compile-details'

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

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export interface RemixUiCompileDetailsProps {
+  plugin: any
+}
+
+export function RemixUiCompileDetails({ plugin }: RemixUiCompileDetailsProps) {
+  return (
+    <>
+      <h1>Compile Details!!!</h1>
+      <h3>Every thing works fine.</h3>
+    </>
+  )
+}

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

@@ -37,8 +37,11 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     isFoundryProject,
     workspaceName,
     configFilePath,
-    setConfigFilePath
+    setConfigFilePath,
+    //@ts-ignore
+    pluginProps
   } = props // eslint-disable-line
+  console.log({ props })
   const [state, setState] = useState({
     hideWarnings: false,
     autoCompile: false,
@@ -1179,6 +1182,15 @@ 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/solidity-compiler.tsx

@@ -13,6 +13,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     api,
     api: {currentFile, compileTabLogic, configurationSettings}
   } = props
+  console.log({ props })
   const [state, setState] = useState({
     isHardhatProject: false,
     isTruffleProject: false,
@@ -207,6 +208,8 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
       <div id="compileTabView">
         <CompilerContainer
           api={api}
+          //@ts-ignore
+          pluginProps={props}
           isHardhatProject={state.isHardhatProject}
           workspaceName={state.workspaceName}
           isTruffleProject={state.isTruffleProject}

libs/remix-ui/solidity-compiler/src/lib/types/index.ts

@@ -8,6 +8,7 @@ export interface SolidityCompilerProps {
 
 export interface CompilerContainerProps {
   api: ICompilerApi,
+  pluginProps: SolidityCompilerProps,
   compileTabLogic: CompileTabLogic,
   isHardhatProject: boolean,
   isTruffleProject: boolean,

tsconfig.paths.json

@@ -97,6 +97,9 @@
             "@remix-ui/settings": [
                 "libs/remix-ui/settings/src/index.ts"
             ],
+            "@remix-ui/solidity-compile-details": [
+                "libs/remix-ui/solidity-compile-details/src/index.ts"
+            ],
             "@remix-ui/solidity-compiler": [
                 "libs/remix-ui/solidity-compiler/src/index.ts"
             ],
@@ -153,7 +156,7 @@
             ],
             "@remixproject/walletconnect-plugin": [
                 "apps/walletconnect/src/index.ts"
-            ],
+            ]
         }
     }
-}
+}